How do I add a row ID to each dynamically added row? [solved]

[Deleted User]

**Summary**

I am using dataTables v.1.8.2. 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.

**Add Row function**
[code]
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'
]);
}
[/code]

Rows are added to the table correctly. The test I am running adds 46 rows, and all appear as expected.


**Add the row 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.

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.

[code]
$('#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;
}
});
[/code]

A `console.log` of the dataTable object shows:
http://i.stack.imgur.com/B5bnG.png

As you can see, #14 has the row id and also the correct rowStripe class. #15 (and onwards) doesn't.

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?


[1]: http://i.stack.imgur.com/B5bnG.png

[Deleted User]

Update: I have made a live example at http://live.datatables.net/olovos/10

allan

Row callback is only executed when a row is drawn (and indeed is executed every time the row is drawn). If you are adding data to the table and it is not drawn on the current page you would need to add the attribute in a different manner - which way is dependent on how you are adding the data.

It is worth noting that DataTables can automatically add a row ID using the DT_RowId property from an object: http://datatables.net/usage/server-side

Allan

[Deleted User]

Hi Allan,

Thanks for the reply. Yes, I noticed DT_RowId, but this is only for server side. I am adding rows using fnAddData. Is there any way to add an ID after this?

The reason I need an ID is to be able to update a row later using something like:
[code]
var mimicTable = $j("#mimicTable").dataTable();
var rowNodes = $j(mimicTable.fnGetNodes());
var rowNode = rowNodes.filter('tr#alarmNum' + almNum).get(0);

if(rowNode !== undefined)
{
var pos = mimicTable.fnGetPosition( rowNode );
var newText = 'test';
mimicTable.fnUpdate(newText, pos, 1);
}

[/code]

Thanks for any help / advice you can give!

[Deleted User]

Update: Found this thread which covers what I want exactly:
http://www.datatables.net/forums/discussion/2119/adding-row-attributes-after-fnadddata/p1

For anyone else wanting a quick solution, I did:

[code]
var addId = $j('#mimicTable').dataTable().fnAddData([
alarmID,
'col2',
'col3',
'col4',
'col5'
]);

var theNode = $j('#mimicTable').dataTable().fnSettings().aoData[addId[0]].nTr;
theNode.setAttribute('id','alarmNum' + alarmID);
[/code]

allan

Good to hear you got it fixed.

> Yes, I noticed DT_RowId, but this is only for server side.

It will work for client-side added data with fnAddData as well. You just need to pass in a suitable object with DT_RowId (exactly the same way as you would for server-side process). Its the same code that handles the add - so that will work just fine.

However, if you've got it working - go with that :-)

Allan