如何获取数据 table 行点击数据对象中的附加信息（JSON 数据）

Question

这是 ajax 调用返回的数据。

{
  "totalRecords": 20,
  "draw": 2,
  "data": [
    {
      "DT_RowId": "row_1",
      "first_name": "Tiger",
      "last_name": "Nixon",
      "addInfo": [
        {
          "city": "Texas",
          "familyDetails ": {
            "name1 ": "Arxin",
            "name2 ": "Drav"
          }
        }
      ]
    },
    {
      "DT_RowId": "row_2",
      "first_name": "Garrett",
      "last_name": "Winters",
      "addInfo": [
        {
          "city": "Texas",
          "familyDetails ": {
            "name1 ": "Rog",
            "name2 ": "Arim"
          }
        }
      ]
    }
  ]
}

这是数据table初始化，使用服务器端分页。

$(document).ready(function() {
 $('#example').DataTable( {
        serverSide: true,
    paging:true,
        ajax: "../php/staff.php",
        columns: [
            { data: "first_name" },
            { data: "last_name" }
        ]
    } );
    
      $('#example tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        alert( 'You clicked on '+data[0]+'\'s row' );
    } );
});

在这里，我想获取除数据 table 行数据之外的有关数据行点击的附加信息。如何获得与每一行关联的 json“addInfo”。

注意：找到了一个添加为隐藏变量的选项，但是保持 json 为隐藏是乏味的。

Answer 1

实际上比你想象的要简单，你可以使用 data: {}

将整行数据绑定到其中

$(document).ready(function() {
 $('#example').DataTable( {
        serverSide: true,
    paging:true,
        ajax: "../php/staff.php",
        columns: [
            { 
                data: {}, render: function (data) {
                    return data.first_name;
                }
            },
            { data: "last_name" }
        ]
    } );
    
      $('#example tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        alert( 'You clicked on '+data.addInfo[0].city+'\'s row' );
    } );
});

如何获取数据 table 行点击数据对象中的附加信息（JSON 数据）

How to fetch additional information(JSON data) present in the data object on data table row click

datatable

jquery

datatables