[Solved] Event works in first page only.

[Solved] Event works in first page only.

anjibmananjibman Posts: 115Questions: 10Answers: 0
edited November 2011 in Plug-ins
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]

Replies

  • allanallan Posts: 61,449Questions: 1Answers: 10,055 Site admin
    There is also an FAQ about events: http://datatables.net/faqs#events (highlighted in red with this link).

    Allan
  • anjibmananjibman Posts: 115Questions: 10Answers: 0
    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-dealbig-deal Posts: 38Questions: 0Answers: 0
    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(:
  • coffeecafecoffeecafe Posts: 1Questions: 0Answers: 0
    I solved probem by:
    [code]
    .dataTable({
    "sPaginationType": "full_numbers",

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

    Best Regard.
This discussion has been closed.