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

添加新行時可以使用DT_RowId，而使用對象代替數組，請參見下文：

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

Answer 5

你的代碼在jsbin中有一些意想不到的東西，即使它看起來有效。 它使用“瀏覽器”數據集進行初始化。 然后它就會清除。 然后它創建一個包含一行的新表。 然后它就會清除。 然后它創建一個包含兩行的新表。 然后它就會清除。 然后它創建一個包含三行的新表。

我必須更好地了解代碼示例及其最終目標（並且我的注意力現在轉移到其他地方）但你應該知道fnRowCallback應該是這樣做的方式，並且有很多冗余表將影響性能的構造和行添加以及將來修改渲染的靈活性。

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