Javascript jQuery DataTables：如何向每个动态添加的行添加行 ID？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8239118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery DataTables: How do I add a row ID to each dynamically added row?
提问by psynnott
Summary
概括
I am using the great dataTables jQuery plugin from http://www.datatables.net. In my script, I am dynamically adding rows based on an event firing using fnAddData. Using fnRowCallback, I add in a unique row ID. This sometimes fails and does not add a row ID. In a test of 46 row additions, usually 6 to 8 rows do not get a row ID.
我正在使用来自http://www.datatables.net的出色的 dataTables jQuery 插件。在我的脚本中，我根据使用fnAddData. 使用fnRowCallback，我添加了一个唯一的行 ID。这有时会失败并且不会添加行 ID。在 46 行添加的测试中，通常有 6 到 8 行没有获得行 ID。
Add Row function
添加行功能
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'
]);
}
Rows are added to the table correctly. The test I am running adds 46 rows, and all appear as expected.
行已正确添加到表中。我正在运行的测试添加了 46 行，并且都按预期显示。
Add the row ID
添加行 ID
I am trying to add a unique ID to each row so I can later modify a specific row and refer to it in dataTable's cache using a combination of fnGetRows and .filter.
我正在尝试为每一行添加一个唯一 ID，以便我以后可以修改特定行并使用 fnGetRows 和 .filter 的组合在 dataTable 的缓存中引用它。
I am doing this using fnRowCallback during the initialisation stage. I've kept all the other settings just incase there's anything there that might have an impact on the problem.
我在初始化阶段使用 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;
}
});
A console.logof the dataTable object shows:
console.logdataTable 对象的A显示：
As you can see, #14 has the row id and also the correct rowStripe class. #15 (and onwards) doesn't.
如您所见，#14 具有行 ID 和正确的 rowStripe 类。#15（及以后）没有。
So, why is fnRowCallback not firing each time a row is added, only sometimes? Maybe there is a better way to add a row ID when a row is added?
那么，为什么每次添加一行时 fnRowCallback 都不会触发，只是有时会触发？也许有更好的方法在添加行时添加行 ID？
回答by psynnott
Found the solution: http://www.datatables.net/forums/discussion/2119/adding-row-attributes-after-fnadddata/p1
找到解决方案：http: //www.datatables.net/forums/discussion/2119/adding-row-attributes-after-fnadddata/p1
For anyone else wanting a quick solution, I did:
对于想要快速解决方案的其他人，我做了：
var addId = $('#mimicTable').dataTable().fnAddData([
alarmID,
'col2',
'col3',
'col4',
'col5'
]);
var theNode = $('#mimicTable').dataTable().fnSettings().aoData[addId[0]].nTr;
theNode.setAttribute('id','alarmNum' + alarmID);
回答by user949000
I know this is quite an old thread, but this might help others.
The easiest way I do it to add id attribute to the last added row as soon as I called the data table function fnAddDatais:
我知道这是一个很旧的线程，但这可能对其他人有所帮助。我在调用数据表函数后立即将 id 属性添加到最后添加的行的最简单方法fnAddData是：
$('#table').dataTable().fnAddData( ['col1','col2','col3'] );
$('#table tr:last').attr('id','col'+row_id);
回答by jamil
Try this it worked for me nicely:
试试这个它对我很有效：
var newRow = oTable.fnAddData( [ etc..]);
var oSettings = oTable.fnSettings();
var nTr = oSettings.aoData[ newRow[0] ].nTr;
nTr.id = 'new id';
回答by gurkov
You can use DT_RowId when you add new row, and use object instead an array, see below:
您可以在添加新行时使用 DT_RowId，并使用对象代替数组，如下所示：
$('#mimicTable').dataTable().fnAddData({
'DT_RowId': alarmID, 0:'col2', 1:'col3', 2:'col4',
3:'col5', 4:'col6', 5:'col7'
});
回答by Rolwin Crasta
This worked for me
这对我有用
var MyUniqueID = "tr123"; // this is the uniqueId.
var rowIndex = $('#MyDataTable').dataTable().fnAddData([ "column1Data", "column2Data"]);
var row = $('#MyDataTable').dataTable().fnGetNodes(rowIndex);
$(row).attr('id', MyUniqueID);
回答by Greg Pettit
There is something unexpected with your code in the jsbin, even if it appears to be working. It initializes with the "browsers" data set. Then it clears. Then it makes a new table with one row. Then it clears. Then it makes a new table with two rows. Then it clears. Then it makes a new table with three rows.
jsbin 中的代码有些出乎意料，即使它看起来可以正常工作。它使用“浏览器”数据集进行初始化。然后它清除。然后它创建一个包含一行的新表。然后它清除。然后它创建一个包含两行的新表。然后它清除。然后它创建一个包含三行的新表。
I'd have to get a better sense of the code sample and its end goal (and alas my attention is diverted elsewhere right now) but you should be aware that fnRowCallback SHOULD be the way to do this, and that there are many redundant table constructions and row additions that are going to impact performance as well as flexibility with modifying rendering in the future.
我必须更好地了解代码示例及其最终目标（可惜我的注意力现在已经转移到其他地方）但是您应该意识到 fnRowCallback 应该是实现此目的的方法，并且有许多冗余表将影响性能以及将来修改渲染的灵活性的构造和行添加。
