如何获取数据表行单击数据对象中存在的附加信息（JSON 数据）

Posted 2023-05-09

【中文标题】如何获取数据表行单击数据对象中存在的附加信息（JSON 数据）

【英文标题】：How to fetch additional information(JSON data) present in the data object on data table row click

【发布时间】：2021-10-19 00:41:43

【问题描述】：

这是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"
          
        
      ]
    
  ]

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

$(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' );
     );
);

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

注意：找到了添加为隐藏变量的选项，但将 json 保持为隐藏状态很繁琐。

【问题讨论】：

您可以查看此链接***.com/questions/37316811/…

我能够获得有关行点击的信息。在上述 json 响应中，检索到“first_name”、“last_name”信息。数据表中不存在此“addInfo”值，如何在行单击时取消该值。

你必须把数据放在某个地方。检查这个例子datatables.net/examples/ajax/null_data_source.html

根据要求，我不想为此添加任何额外的列。有没有其他方法可以在不添加点击或额外列的情况下实现这一点。

您不需要任何额外的列或隐藏列。据我所知，我不能说这是否可能。

【参考方案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' );
     );
);

【讨论】：

错误：为第 0 行第 0 列请求未知参数“first_name”

@user630209 你能尝试在渲染函数中调试吗？或者在return之前添加console.log(data)