[Solved] Event works in first page only.
[Solved] Event works in first page only.
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]
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]
This discussion has been closed.
Replies
Allan
[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
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(:
[code]
.dataTable({
"sPaginationType": "full_numbers",
"fnDrawCallback": function(){
console.log("fnDrawCallback");
}
[/code]
I add "fnDrawCallback" for call my function.
Best Regard.