使用纯JSON数据源的DataTables点击按钮获取数据显示undefined的解决求助

我来帮你搞定这个问题，核心原因是你的JSON数据是对象格式（每个条目是带键的对象），不是数组格式，所以你用data[1]去访问是拿不到值的，得用对象的属性名来获取。下面一步步给你修正：

1. 修正按钮点击事件的取值逻辑 #

原来的代码里用data[1]尝试取oid的值，但row().data()返回的是对应行的原始JSON对象，不是索引数组，所以要改成通过属性名访问：

$('#example tbody').on( 'click', 'button', function () { 
  var data = table.row( $(this).parents('tr') ).data(); 
  alert("oid is: " + data.oid); // 用对象属性名访问，也可以写成data['oid']
});

2. 修复DataTables初始化代码里的语法错误 #

你的初始化代码里有几处小问题，会影响表格的正常工作：

• order: [[ -0 ]]是无效配置，排序需要指定列索引（从0开始）和排序方向，比如按oid列（索引1）升序排序："order": [[ 1, 'asc' ]]
• 最后一列的配置里重复写了"data": null和无效的"targets": -0，需要清理掉重复内容

3. 修正JSON格式的小问题 #

你的JSON里最后一个键值对后面多了个逗号，而且mobile字段如果要保留前导零的话，应该用字符串格式（不然会被当成数字丢失前导零），标准JSON应该是这样：

[
  {
    "id": "3",
    "oid": "213",
    "name": "Koh Tien Kit Thomas ",
    "mobile": "0123456789",
    "email": "some@mail.com"
  }
]

完整修正后的代码 #

$(document).ready(function() { 
  var table = $('#example').DataTable( { 
    "order": [[ 1, 'asc' ]], // 按oid列（索引1）升序排序
    "pageLength": 24, 
    "oLanguage": { 
      "sSearch": '<a class="btn searchBtn" id="searchBtn"><i class="fa fa-search"></i></a>' 
    }, 
    "lengthChange": false, 
    "ajax": { 
      "url": "data.php?content=userdata", 
      "dataSrc": "" 
    }, 
    "columns": [ 
      { "data": "id", "visible": false }, 
      { "data": "oid" }, 
      { "data": "name" }, 
      { "data": "mobile" }, 
      { "data": "email" }, 
      { 
        "data": null, 
        "defaultContent": "<button>test</button>" 
      } 
    ] 
  }); 

  $('#example tbody').on( 'click', 'button', function () { 
    var data = table.row( $(this).parents('tr') ).data(); 
    alert("oid is: " + data.oid); 
  }); 
});

简单总结一下：当你的数据源是对象数组时，row().data()返回的是单个对象，必须通过属性名来获取对应字段，而不是数组索引。

内容的提问来源于stack exchange，提问作者rafalefighter