How to define custom row ID's using sAjaxSource

laszlof

Hello,

I have a table thats being populated by an ajax JSON source. My problem is, I need to highlight certain rows based on the content found in the source data, and also set specific ID to each column for a context menu I am using. Is there a way to do this easily? Maybe some additional code I can add to the JSON data that will allow for it?

In case its needed, here is the code I am using (The table auto refreshes):

[code]

function InitServerTable() {
oServerTable = $('#servertable').dataTable(
{
"bJQueryUI": true,
"sScrollX": "",
"bSortClasses": false,
"bProcessing": true,
"aaSorting": [[6,'desc']],
"bAutoWidth": true,
"bInfo": true,
"sScrollY": "100%",
"sScrollX": "100%",
"bScrollCollapse": true,
"sPafinationType": "full_numbers",
"sAjaxSource": "/path/to/source.json"
});
}


function RefreshTable(tableId, urlData) {
$.getJSON(urlData, null, function(json) {
table = $(tableId).dataTable();
oSettings = table.fnSettings();
table.fnClearTable(this);
for (var i=0; i

Gerardo

For highlighting rows, use fnRowCallback to add a class if your conditions are met.

Don't know about column, maybe sNames can help, but not sure.

Hth,
Gerardo

laszlof

Thanks for the tip. I was able to highlight rows using fnRowCallback. Heres the code I used:

[code]

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if (aData[6] > 10) {
$('td:eq(0)', nRow).addClass('highloadRow');
$('td:eq(1)', nRow).addClass('highloadRow');
$('td:eq(2)', nRow).addClass('highloadRow');
$('td:eq(3)', nRow).addClass('highloadRow');
$('td:eq(4)', nRow).addClass('highloadRow');
$('td:eq(5)', nRow).addClass('highloadRow');
$('td:eq(6)', nRow).addClass('highloadRow');
$('td:eq(7)', nRow).addClass('highloadRow');
$('td:eq(8)', nRow).addClass('highloadRow');
$('td:eq(9)', nRow).addClass('highloadRow');
$('td:eq(10)', nRow).addClass('highloadRow');
$('td:eq(11)', nRow).addClass('highloadRow');
}
if (aData[7] > 2000) {
$('td:eq(0)', nRow).addClass('highqueueRow');
$('td:eq(1)', nRow).addClass('highqueueRow');
$('td:eq(2)', nRow).addClass('highqueueRow');
$('td:eq(3)', nRow).addClass('highqueueRow');
$('td:eq(4)', nRow).addClass('highqueueRow');
$('td:eq(5)', nRow).addClass('highqueueRow');
$('td:eq(6)', nRow).addClass('highqueueRow');
$('td:eq(7)', nRow).addClass('highqueueRow');
$('td:eq(8)', nRow).addClass('highqueueRow');
$('td:eq(9)', nRow).addClass('highqueueRow');
$('td:eq(10)', nRow).addClass('highqueueRow');
$('td:eq(11)', nRow).addClass('highqueueRow');
}
if (aData[8] == "DOWN") {
$('td:eq(0)', nRow).addClass('serverdownRow');
$('td:eq(1)', nRow).addClass('serverdownRow');
$('td:eq(2)', nRow).addClass('serverdownRow');
$('td:eq(3)', nRow).addClass('serverdownRow');
$('td:eq(4)', nRow).addClass('serverdownRow');
$('td:eq(5)', nRow).addClass('serverdownRow');
$('td:eq(6)', nRow).addClass('serverdownRow');
$('td:eq(7)', nRow).addClass('serverdownRow');
$('td:eq(8)', nRow).addClass('serverdownRow');
$('td:eq(9)', nRow).addClass('serverdownRow');
$('td:eq(10)', nRow).addClass('serverdownRow');
$('td:eq(11)', nRow).addClass('serverdownRow');
}
return nRow;
}
[/code]

This is just adding a class to each specific cell within the row. My next issue is, I need to add an ID tag to ALL of the rows. (I could also do it with a class, but for consistency, an ID would be better).

Any idea on how to accomplish this? Thanks.

jscheeler

laszlof

Add the following before or after all the if statements. This should accomplish what you need.

[code]
$(nRow).attr('id', 'someValue');
[/code]