callback function for after pagination is run in DOM

indianabenny

I'm using DataTables on some HTML tables so users can sort by the different columns. I also have implemented the basic full_numbers pagination as well as "details" where users can click on a link to show details much like on this page:
http://www.datatables.net/examples/api/row_details.html

I'm running into an issue where if I have more than one page of results and go to the second page and click on the details link, nothing happens. I'm also utilizing shadowbox to load items into a modal off a link within the content and that also fails to operate properly. Likewise, if I sort the table and click on a details link or a shadowbox link from an item that was on the second page before sorting they also fail to behave properly.

It appears as if an item is on page 2, then the javascript doesn't get initialized for them. My thought was that if I there was some sort of callback function that I could use after the sorting or the call to the pagination, I could re-initialize the shadowbox items as well as create a function that would re-initialize the details link call.

Any help would be greatly appreciated.

Here's the code I'm utilizing:
html table:
http://www.get-simple.com/downloads/dataTables.html

Javascript:
[code]
//////////////////////////////////////// DATA TABLES DATA SETUP ////////////////////////////////////////
// details area content is generated here
function fnFormatDetails (nTr, table) {
var aData = table.fnGetData( nTr );
var sOut = aData[4];

return sOut;
}

function fnShowHide( iCol, table ) {
var bVis = table.fnSettings().aoColumns[iCol].bVisible;
table.fnSetColumnVis( iCol, bVis ? false : true );
}
////////// Chapter Events //////////
var chapterEventsTable;
// initialize data table js
chapterEventsTable = $('#chapterEvents').dataTable({
"aoColumns": [
{"bSortable": false }, null, null, null, null, null, null, null, null, null
],
"aaSorting": [[ 2, "desc" ], [1, "desc"]],
"sPaginationType": "full_numbers",
"bAutoWidth": false
});

fnShowHide(4, chapterEventsTable);

// sets up watch on show details link for datatables areas
$('#chapterEventsTable a.showDetails').click(function(event) {
event.preventDefault();
var nTr = this.parentNode.parentNode;
var imgSrc = $(this).children('img').attr("src");
var tblRow = $(this).closest('tr');

if ( imgSrc.match('icn_more_collapse_details') ) {
/* This row is already open - close it */
$(this).html(''); // update image
chapterEventsTable.fnClose( nTr );
tblRow.removeClass('open');
tblRow.next().removeClass('sub');
} else {
/* Open this row */
tblRow.addClass('open');
$(this).html(''); // update image
chapterEventsTable.fnOpen( nTr, fnFormatDetails(nTr, chapterEventsTable), 'details' );
tblRow.next().addClass('sub');
}

setupDelete();
Shadowbox.setup();
});
////////// End Chapter Events //////////
//////////////////////////////////////// END DATA TABLES DATA SETUP ////////////////////////////////////////

setupDelete();
[/code]

cdaigle

Hi there,

I believe your problem is that you are binding your events with .click(). Since the rows are redrawn when filtering/sorting/paging, the original events binded when the table was created no longer exist. The easy way around this would be to change your
[code] $('#chapterEventsTable a.showDetails').click(function(event) { [/code]
to
[code] $('#chapterEventsTable a.showDetails').live('click', function(event) { [/code]
Alternatively, you can use the fnDrawCallback option to re-bind the .click() event on each draw. (see here for the fnDrawCallback: http://datatables.net/usage/callbacks#fnDrawCallback )

Hope this helps.

indianabenny

Thanks cdaigle. That did the trick. I had tried
[code]$('#chapterEventsTable a.showDetails').live('click', function() {[/code]

forgot the event in the function parenthesis so it didn't work. Appreciate the help.

Ben