Modifying Cell Contents with fnInitComplete

thecountofzero

After the DataTable has been initialized, I am using the fnInitComplete to select certain cells and to modify the content.

[code]
$(document).ready(function() {
$('#devices_table').dataTable( {
"bJQueryUI": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sWidth": "1%", "sClass": "center" },
{ "sWidth": "3%", "sClass": "center" },
{ "sWidth": "3%", "sClass": "center" },
{ "sWidth": "17%" },
{ "sWidth": "17%" },
{ "sWidth": "17%" },
null
],
"fnInitComplete": function() {
$("#devices_table div.text").html("mikey");
},
"sAjaxSource": '../examples_support/server_processing.php'
} );
} );
[/code]

My table has 30 rows and the DataTable is displaying 10 per page. The problem is when executing the jQuery selector within fnInitComplete to grab the cells, it only grabs the 10 that are currently being displayed. It peforms the modification I want it to, but only for these 10. When columns are sorting or pagination clicked, the other elements that should be modified too, are not.

How do I fix this? Do I need to repeat the code to do the modification after every sort or pagination?


Thanks,
Mike

thecountofzero

Anyone have any ideas?

Do I need to iterate over the column data directly as opposed to using a jQuery selector?

allan

Use fnGetNodes() to get all of the TR elements in the table. Then any sub row selectors will work fine.

Allan