script not working on subsequent pages

affablelochan

Hello,

I am one of the big fan of dataTable. I started using this for presenting table element in more organized way. Thanks for this plugin.

Now i wrote a java script which works only on the first page and not working on subsequent pages. To be more presize, in my table we can view 10 rows and options to view 25,50 and all the elements. So the script works on only the first 10 rows which are visible after the table loads but not on other invisible rows. Is there a solution to this issue?

Kindly let me know if you need more information on this.

Regards
Rajiv

GregP

Rajiv, it would help to see your dataTable({ ... }) (initialization) code as well as the script that's not working after the first page. The script that's only working on the front page may be something that's trying to access the DOM, and all those records simply aren't in the DOM yet!

In most cases, scripts that act upon the data itself are done inside the dataTable() function, using callbacks. fnInitComplete, fnRowCallback and fnDrawCallback are 3 that I use for different purposes. If your script can realistically move inside one of those callbacks, it will trigger each time the table is redrawn.

If it's a cosmetic effect, it might live just fine outside of the dataTable() function, but you might be using .click() or .bind() or some other listener that's being destroyed when the table is redrawn. In almost all cases, I recommend using .delegate() for binding event listeners (binding to an element higher in the DOM tree that doesn't get destroyed).

affablelochan

Hi GregP,

My dataTable initialization code:-
[code]






$(document).ready(function() {
$(".dataTable").dataTable( {
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "all"]]
} );
$('.dataTable').dataTable().sparsify();
$('.dataTable').dataTable().fnFilterOnReturn();
} );


[/code]

Here the fnFileronReturn works perfectly fine and the corresponging javascript is enter.js.
The problematic function is sparsify.js and which acts on only the first page. The code follows.

[code]
// jquery plugin
$.fn.sparsify = function () {
this.each(function(tidx, tableel)
{
$(tableel).find("tr").each(
function(index, trel)
{
var hook=undefined;
$(trel).children("td").each(
function(cellidx,tdel)
{
curr = $(tdel)
if (hook === undefined) { hook = curr; }
else {
if ( curr.html() == hook.html() ) {
$(curr).html("");
} else {
hook = curr;
}
}
});
});
}
);
return this;
}
[/code]

This script checks table element of each row of datatable. If the element is same as previous element then its not displayed in the table. Kindly suggest me which of the three function that you recommended will be useful in my case. Thank you very much for the help.

Regards
Rajiv

allan

You'll need to either run the plug-in on each draw using fnDrawCallback, or what I would suggest is modify the plug-in to use live events. See: http://datatables.net/faqs#events

Allan

affablelochan

Hi Allan,

Now my java script works on all the redraw. I used the fnDrawCallback as you suggested. Following code worked in my case.

[code]







$(document).ready(function() {
oTable = $(".dataTable").dataTable( {
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "all"]],
"fnDrawCallback": function() {
if ( typeof oTable != 'undefined' ) {
oTable.sparsify();
}
}
} );
$('.dataTable').dataTable().fnFilterOnReturn();
oTable.sparsify();

} );


[/code]

In this case sparsify is the java script which was not working on redraw earlier.

affablelochan

Oh Thank you so much for the suggestion.

Regards
Rajiv