jQuery DataTables：如何为每个动态添加的行添加行 ID？

Posted 2023-05-07

【中文标题】jQuery DataTables：如何为每个动态添加的行添加行 ID？

【英文标题】：jQuery DataTables: How do I add a row ID to each dynamically added row?

【发布时间】：2012-01-04 13:31:50

【问题描述】：

总结

我正在使用来自http://www.datatables.net 的出色的dataTables jQuery 插件。在我的脚本中，我使用fnAddData 根据事件触发动态添加行。使用fnRowCallback，我添加了一个唯一的行ID。这有时会失败并且不会添加行 ID。在 46 行添加的测试中，通常 6 到 8 行没有得到行 ID。

添加行功能

function ps_ins(row)

  var rowArray = row.split('|');
  row = rowArray;
  var alarmID = parseInt(row[1],10);

  $('#mimicTable').dataTable().fnAddData([
    alarmID, 'col2', 'col3', 'col4',
    'col5', 'col6', 'col7'
  ]);

行已正确添加到表中。我正在运行的测试添加了 46 行，并且都按预期显示。

添加行 ID

我正在尝试为每一行添加一个唯一 ID，以便以后可以修改特定行并使用 fnGetRows 和 .filter 的组合在 dataTable 的缓存中引用它。

我在初始化阶段使用 fnRowCallback 执行此操作。我保留了所有其他设置，以防有任何可能对问题产生影响的情况。

  $('#mimicTable').dataTable(
    "sDom": 'lip<"mimicSpacer">f<"numUnAck">rt',
    "sScrollY": "365px",
    "aaSorting": [[4,'desc'],[5,'desc']],
    "iDisplayLength": 15,
    "aLengthMenu": [[15, 50, 100, -1], [15, 50, 100, 'All']],
    "bAutoWidth": false,
    "aoColumns": [
      null,
       "sWidth": "20%" ,
       "sWidth": "22%" ,
       "sWidth": "9%" ,
       "sWidth": "9%" ,
       "sWidth": "20%" ,
       "sWidth": "20%" 
    ],
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull) 
      $(nRow).attr("id",'alarmNum' + aData[0]);
      return nRow;
    
  );

dataTable 对象的console.log 显示：

如您所见，#14 具有行 ID 和正确的 rowStripe 类。 #15（及以后）没有。

那么，为什么每次添加一行时 fnRowCallback 都不会触发，只是有时？添加行时是否有更好的方法来添加行 ID？

【问题讨论】：

回调肯定没有运行吗？您是否尝试过在 fnRowCallback 函数中记录 nRow 的值？

嗨，Phil，fnRowCallback 似乎被调用了多次，因此很难仅输出 46 行来查看发生了什么。

用户喜欢看 jsfiddle，如果他们应该回答更复杂的问题（否则需要很长时间来分析他们，他们只会继续下一个问题）

每一行是否还没有唯一的 id - 它在数组中的位置？

@matpol - 是的，但如果我理解正确，我需要使用 .fnGetNodes() 然后 .filter() 来获取行以更新它显示的列数据。请注意，我需要更新的行可能会被过滤掉和/或在不同的页面上。

【参考方案1】：

找到解决方案： http://www.datatables.net/forums/discussion/2119/adding-row-attributes-after-fnadddata/p1

对于其他想要快速解决方案的人，我做到了：

var addId = $('#mimicTable').dataTable().fnAddData([
  alarmID,
  'col2',
  'col3',
  'col4',
  'col5'
]);

var theNode = $('#mimicTable').dataTable().fnSettings().aoData[addId[0]].nTr;
theNode.setAttribute('id','alarmNum' + alarmID);

【讨论】：

addId 在上面定义。从文档中，fnAddData 返回一个整数数组，表示 aoData 中已添加到表中的索引列表。因为我们只添加一行，所以它返回添加的索引。

【参考方案2】：

我知道这是一个相当古老的线程，但这可能对其他人有所帮助。 一旦我调用数据表函数fnAddData，我将 id 属性添加到最后添加的行的最简单方法是：

$('#table').dataTable().fnAddData( ['col1','col2','col3'] );     

$('#table tr:last').attr('id','col'+row_id);

【讨论】：

如果您添加的数据大小大于您在一页中显示的行数。这行不通。

这正是我喜欢 *** 的原因...谢谢！

【参考方案3】：

试试这个它对我很有效：

var newRow = oTable.fnAddData( [ etc..]);
var oSettings = oTable.fnSettings(); 
var nTr = oSettings.aoData[ newRow[0] ].nTr;
nTr.id = 'new id';

【参考方案4】：

您的 jsbin 中的代码有些意外，即使它看起来可以正常工作。它使用“浏览器”数据集进行初始化。然后它清除。然后它用一行创建一个新表。然后它清除。然后它创建一个有两行的新表。然后它清除。然后它会创建一个包含三行的新表。

我必须更好地了解代码示例及其最终目标（可惜我的注意力现在转移到了其他地方）但您应该知道 fnRowCallback 应该是执行此操作的方法，并且有许多冗余表结构和行添加会影响性能以及未来修改渲染的灵活性。

【讨论】：

感谢您的回答，但请查看我发布的答案。它有效 :) 性能似乎还可以，但我会做进一步的测试。

你把更新后的代码折叠到jsbin了吗？我也很想四处逛逛。我可以帮你找出任何异常情况。

【参考方案5】：

您可以在添加新行时使用 DT_RowId，并使用对象而不是数组，如下所示：

 $('#mimicTable').dataTable().fnAddData(
            'DT_RowId': alarmID, 0:'col2', 1:'col3', 2:'col4',
            3:'col5', 4:'col6', 5:'col7'
        );

【讨论】：

你应该总是解释你的答案，而不是仅仅粘贴一段代码

在我看到这个帮助我弄清楚我遇到的神秘错误之前，一直环顾四周。谢谢！

【参考方案6】：

这对我有用

var MyUniqueID = "tr123"; // this is the uniqueId.
var rowIndex = $('#MyDataTable').dataTable().fnAddData([ "column1Data", "column2Data"]);
var row = $('#MyDataTable').dataTable().fnGetNodes(rowIndex);
$(row).attr('id', MyUniqueID);