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

摘要

我正在使用来自的伟大的dataTables jQuery插件。在我的脚本中，我使用

fnAddData

根据事件触发动态添加行。使用

fRowCallback

，我添加了一个唯一的行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;
    }
  });

$（'#可模仿'）。数据表({
“sDom”：“lipfrt”，
“sScrollY”：“365px”，
“aaSorting”：[[4，'desc']，[5，'desc']，
“iDisplayLength”：15，
“阿伦提努”：[[15,50,100，-1]，[15,50,100，'全部]]，
“bAutoWidth”：假，
“aoColumns”：[
无效的
{“sWidth”：“20%”，
{“sWidth”：“22%”，
{“sWidth”：“9%”，
{“sWidth”：“9%”，
{“sWidth”：“20%”，
{“sWidth”：“20%”
],
“fnRowCallback”：函数（nRow、aData、iDisplayIndex、iDisplayIndexFull）{
$（nRow）.attr（“id”，“alarmNum”+aData[0]）；
返回nRow；
}
});

dataTable对象的

console.log

显示：

如您所见，#14具有行id和正确的rowStripe类#15岁（及以上）的人不会

那么，为什么fnRowCallback不在每次添加一行时触发，只是偶尔触发？也许有更好的方法在添加行时添加行ID？

找到了解决方案：

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

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

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

---

jsbin中的代码有一些意想不到的地方，即使它看起来正在工作。它使用“浏览器”数据集进行初始化。然后就放晴了。然后，它将生成一个包含一行的新表。然后就放晴了。然后它创建一个包含两行的新表。然后就放晴了。然后，它创建了一个三行的新表

---

我必须更好地理解代码示例及其最终目标（唉，我的注意力现在转移到了其他地方），但您应该知道fnRowCallback应该是实现这一点的方法，还有许多冗余的表构造和行添加将影响性能以及将来修改呈现时的灵活性。

我知道这是一个相当古老的线程，但这可能会帮助其他线程。 调用数据表函数

fnAddData

后，将id属性添加到最后添加的行的最简单方法是：

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

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

---

试试这个它对我很管用：

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

---

您可以在添加新行时使用DT_RowId，并使用object代替数组，如下所示：

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

这对我有用

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

---

回调肯定没有运行吗？您是否尝试过在

fnRowCallback

函数中记录nRow的值？嗨，Phil，fnRowCallback似乎被多次调用，因此很难只获得46行输出来查看发生了什么。如果用户需要回答更复杂的问题，他们喜欢查看JSFIDLE（否则需要花费很长时间来分析它们，然后他们继续下一个问题）是否每一行都没有唯一的id—它在数组中的位置？@matpol—是的，但是如果我理解正确，我需要使用.fnGetNodes（）和.filter（）获取该行以更新其显示的列数据。注意，我需要更新的行可能会被过滤掉和/或在其他页面上。感谢您的回答，但请查看我发布的答案。它可以工作：）性能似乎正常，但我将做进一步的测试。您是否已将更新的代码折叠到jsbin中？我也很想四处看看。如果要添加的数据的大小大于一页中显示的行数，我可以帮助您查找任何异常。这行不通，这正是我喜欢stackOverflow的原因。。。非常感谢。ADDD的定义就在上面。从文档中，fnAddData返回一个整数数组，表示aoData中已添加到表中的索引列表。因为我们只添加了一行，所以它会返回添加的索引。你应该始终解释你的答案，而不是粘贴一块代码。在我看到这段代码片段之前，我环顾四周，这段代码片段帮助我找出了我遇到的神秘错误。谢谢你！