jQuery DataTables:如何为每个动态添加的行添加行ID?

psy*_*ott 13 javascript jquery datatables

摘要

我正在使用来自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'
  ]);
}
Run Code Online (Sandbox Code Playgroud)

行正确添加到表中.我正在运行的测试添加了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;
    }
  });
Run Code Online (Sandbox Code Playgroud)

console.logDataTable对象节目: 缺少行ID

如您所见,#14具有行ID和正确的rowStripe类.#15(及以后)没有.

那么,为什么每次添加行时fnRowCallback都不会触发,有时只会触发?也许在添加行时有更好的方法来添加行ID?

psy*_*ott 27

找到解决方案: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);
Run Code Online (Sandbox Code Playgroud)

  • addId就在上面定义.从文档中,fnAddData返回一个整数数组,表示已添加到表中的aoData中的索引列表.因为我们只添加一行,所以它返回添加的索引. (2认同)