change class of paginated rows

mat

Hi!

I am trying to reformat rows of a datatable.
The data of the table is more or less a listing of folders.

All I want to do is remove class from each and add a new one.

[code]
$(function(){
$("tr[id^='folder']").each(function(){
$(this).removeClass('gradeA').addClass('gradeU');
}
);

});
[/code]

This works fine as long as the table is not paginated and not filtered.

Thanks

Mat

mirkec

That script is in $(document).Ready or? If so, it will be called only once.
You have fndrawCallback event which triggers on every redraw of table, so you could do this:

[code]
oTable= $('#table').dataTable({
"sAjaxSource": "YourSource",
...
"fnDrawCallback": function () { //your function here },
...
});
[/code]

allan

@Mat - run your script before you initialise DataTables, rather than after it - since at the moment it is operating on only the DOM elements that DataTables has put in the document. Alternatively use fnGetNodes() to get all TR nodes: http://datatables.net/examples/advanced_init/events_post_init.html - or (there is always another option!) you can do the fnDrawCallback like mirkec suggests which will work nicely as well.

Allan

mat

Thanks for your help!

It works finally (though I do not fully understand why and how):

First:
Initialize document and datatable:

[code]
$(document).ready(function() {
oTable = $('#table-result').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bPaginate": true,
"fnDrawCallback": function(){
$("tr[id^='folder']").each(function(){
$(this).removeClass('gradeA').addClass('gradeU');
});
$("#folder_"+ current_folder_ind).removeClass('gradeU').addClass('gradeA');
}
});

});

[/code]
The second function reformats the rows, which are just visible (old behaviour) without redrawing the table.
This function is called when a button within the table is pressed.

@allen: That's why I cannot do all css at the beginning.


[code]
$(function(){
$("tr[id^='folder']").each(function(){
$(this).removeClass('gradeA').addClass('gradeU');
}
);

$("#folder_"+ folder_ind).removeClass('gradeU').addClass('gradeA');


});

[/code]
I could get rid of that function, if I could force the datatable to redraw.

allan

> I could get rid of that function, if I could force the datatable to redraw.

http://datatables.net/api#fnDraw :-)

Allan

mat

Thanks Allan,

this simple line just eliminated a whole block of code:

[code]
oTable.fnDraw(false);
[/code]

So cool, so great.

mat

next Problem:

I added a button on top of the page (outside the datatable).

[code]
$( "#button").button();
[/code]


After redrawing the table, it seems that the button looses all of its classes (ui-hover, and so on).

mat

my bad,
I overlooked, that I rewrite the whole section with that functions, that also redraws the table.