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

Question

摘要

我正在使用来自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？

- psx

---

回调函数一定没有运行吗？你尝试在fnRowCallback函数中记录nRow的值了吗？ - Phil Parsons

嗨Phil，fnRowCallback似乎被调用了多次，所以很难只得到46行输出来查看发生了什么。 - psx

用户喜欢查看 jsfiddle 来回答更复杂的问题（否则对他们来说分析时间太长，他们会转向下一个问题）。 - noob

每一行都没有一个独特的ID吗？它不是已经根据数组中的位置确定了吗？ - matpol

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

@micha - 已添加于http://live.datatables.net/olovos/10 - psx

Answer 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);

- psx

---

addId在上面已经定义。从文档中可以看出，fnAddData返回一个整数数组，表示已添加到表格中的aoData索引列表。由于我们只添加了一行，因此它返回的是添加的索引。 - psx

Answer 2

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

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

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

- user949000

---

如果你添加的数据大小大于一页中显示的行数，这将无法工作。 - Jia

这就是为什么我喜欢StackOverflow的原因...谢谢！ - Fergus

Answer 3

尝试这个方法，对我很有效：

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

- jamil

Answer 4

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

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

- gurkov

---

你应该始终解释你的答案，而不仅仅是粘贴一段代码块。 - Gary

在看了很久之后，我终于发现了这个片段，它帮助我解决了那个晦涩的错误。谢谢你！ - Brendan

Answer 5

在 jsbin 中，您的代码出现了一些意外情况，即使它似乎正在工作。它使用“浏览器”数据集进行初始化。然后它被清除。接着它创建一个有一行的新表格。然后它被清除。接着它创建一个有两行的新表格。然后它被清除。接着它创建一个有三行的新表格。

我需要更好地理解代码示例及其最终目标（可惜我现在的注意力分散在其他方面），但您应该知道 fnRowCallback 应该是正确的方法来完成此操作，并且有许多冗余的表格构造和行添加将会影响性能以及在将来修改呈现方式时的灵活性。

- Greg Pettit

---

谢谢你的回答，但请看一下我发布的答案。它有效 :) 性能似乎还可以，但我会进行进一步测试。 - psx

你把更新的代码合并到jsbin里了吗？我也很想看看。我可以帮你找出任何异常。 - Greg Pettit

Answer 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);

- Rolwin Crasta