Adding and Deleting Rows with Row Numbers

mamal

Hi,

I have a table with row numbers in the first column. I need to add and delete rows and retain the proper row numbering. I found a way of adding the row number when a row is created in the first column using fnRowCallback:

[code]
"fnRowCallback" : function(nRow, aData, iDisplayIndex){
$("td:first", nRow).html(iDisplayIndex +1);
return nRow;
},
[/code]

But what about when a row that's in the middle of the table is deleted? The only callback I can think to use is fnDrawCallback but I can't think what could be put in there to recalculate all of the row numbers, or if that recalculation is actually something that should be done on every draw.

How do you manage row numbers? Cheers.

mamal

One way I mentioned above, calculating the row numbers on every draw, I think would look something like this:
[code]
my_table= $("#image_upload_status_table").dataTable({
"fnDrawCallback":function(){
table_rows = my_table.fnGetNodes(); #how to refer to this method?
$.each(table_rows, function(index){
$("td:first", this).html(index+1);
});
}
} );
[/code]

... This would work great if my_table were actually defined in the dataTable() method, but it isn't since it isn't instantiated yet. Any idea how to reference a method [fnGetNodes()] of the dataTable object from within the dataTable instantiation method? The above code would work perfectly if only I could refer to the fnGetNodes() function somehow.

mamal

Alright, I found a way of doing this that works. In my case I have a table where I want the row number to be in the first column, and I want the numbers to recalculate when a row is added or deleted. So my table looks roughly like:

[code]




Choose Slides




[/code]

I can recalculate the row numbers using the fnDrawCallback function. The tricky part is just finding a reference to the datatable object to use while defining that call back. Since the datatable object isn't defined inside of its own instantiation method (of course), you don't have access to it or its methods. I needed to use the fnGetNodes function so I had to find a way to reference the datatables object anyway. The first time fnDrawCallback is called the datatable object reference is undefined, and thereafter it's defined, so I just added some type checking which passes the "undefined" case the first time around.

[code]
image_table = $("#image_upload_status_table").dataTable({
"fnDrawCallback":function(){
recalculate_image_row_numbers();
}
});

function recalculate_image_row_numbers() {
if (typeof image_table != "undefined") {
table_rows = image_table.fnGetNodes();
$.each(table_rows, function(index){
$("td:first", this).html(index+1);
});
}
}
[/code]