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？

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

Answer 2

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

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

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

Answer 3

试试这个很适合我：

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

Answer 4

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

我必须更好地了解代码示例及其最终目标（并且我的注意力现在转移到其他地方）但你应该知道fnRowCallback应该是这样做的方式，并且有许多冗余表构造和行添加将影响性能以及将来修改渲染的灵活性。

Answer 5

添加新行时可以使用DT_RowId，而使用对象代替数组，请参见下文：

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

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