[Solved] Event works in first page only.

anjibman

Hi

I am using DataTable with collapsible event where each row have hidden div and is displayed when arrow on the left of the row is clicked. This problem is after solving this problem :

http://datatables.net/forums/comments.php?DiscussionID=3041&page=1#Item_6

Now, when use DataTable pagination feature, such arrow is initialized on the first page only and all other page doesn't hide div. Its shows all detail and no arrow is also initialized i.e. no class is implemented from next page onward.

What I am doing wrong? Do I have to setup something more?

My code sequence is
1. DataTable Initialization

2. Collapsible function call for each row
[code]
$(function(){
$('#message table tbody tr td p').collapsible();
});
[/code]

3. My table structure in JSP is as:
[code]



Heading 1
Heading 2





Row1

//Hidden sub Info


...



[/code]

allan

There is also an FAQ about events: http://datatables.net/faqs#events (highlighted in red with this link).

Allan

anjibman

I have a JSP page which display the query result in Datatable.

[code]


enhance({
loadScripts: [
'js/jquery.js',
'js/jquery.dataTables.js',
'js/ColReorder.js',
'js/dataTable.fileSize.js',
'js/dataTable.sizeSort.js',
'js/jquery.expander.js',
'js/jquery.collapsible.js',
'js/onload.sent.js'
],
loadStyles: [
'css/enhanced.css',
'css/table.css',
],
forcePassText: "",
forceFailText: "",
queueLoading: true
});







.....







.....


.....
.....

.....








[/code]

And my JS file (onload.sent.js) is
[code]
$(document).ready(function() {
$('#sent table tbody tr td h5').collapsible();

$('tr td div#message.expandable').expander({
slicePoint: 40,
userCollapseText: '[collapse]'
});

/* Initialse DataTables for Sentbox */
var sTable = $('#sentTable').dataTable({
"aoColumns": [
null, //Name
{ "sClass": "center" }, //count
{ "sType": "file-size" }, //size
{ "sClass": "center" }, //created Date
{ "sClass": "center" } //updated date
],
"aaSorting": [[3, 'desc']]
});
});
[/code]

Problem I am having is this expander plugin is working on the first page only. I did put the initialization in order in JS file. Can anyone suggest what I am doing wrong or any means to debug this problem.

Thanks in advance
Anjib

big-deal

Hey.

If nothing else works try column rendering (fnRender), this way - data tables iteself will take care of adding the needed events to the new td's.
You can as an alternative - use a callback using fnRowCallback - but same method here as well.

Good luck(:

coffeecafe

I solved probem by:
[code]
.dataTable({
"sPaginationType": "full_numbers",

"fnDrawCallback": function(){
console.log("fnDrawCallback");
}
[/code]
I add "fnDrawCallback" for call my function.

Best Regard.