Question

I have a select menu with two options “All” and “test”…..when I select “All” a datatable with 15 columns is shown and when “test” is selected, another datatable with 5 columns is selected….

When there are less than or equal to 5 items, the pagination should be disabled…

This is what I’ve done so far,

created the 2 datatables as mentioned,

function All(){

$('#All').dataTable({
    "iDisplayLength": 5,
    "sPaginationType": "four_button",
    "bJQueryUI": true,
    "bRetrieve": true,
    "bAutoWidth": false,
    "fnDrawCallback": function() {
            if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1)  {
                    $('.dataTables_paginate').css("display", "block");
            } else {
                    $('.dataTables_paginate').hide();
            }
        }
});
}

function Test(){

$('#Test').dataTable({
    "iDisplayLength": 5,
    "sPaginationType": "four_button",
    "bJQueryUI": true,
    "bRetrieve": true,
    "bAutoWidth": false,
    "fnDrawCallback": function() {
            if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1)  {
                    $('.dataTables_paginate').css("display", "block");
            } else {
                    $('.dataTables_paginate').hide();
            }
        }
});
}

$(document).ready(function(){

$('#List').val('All');
All();
$('#test').hide();

$("#List").change(function(){

if(this.value == 'All'){

        All();
        $('#All').show();
        $('#Test_wrapper').hide();
}
else if (this.value == 'Test'){
        Test();
        $('#Test').show();
        $('#All_wrapper').hide();
}
});
});

As you can see, I’m checking for the pagination in the “fnDrawCallBack” function……
The page loads find when called upon initially…..but when I select All after selecting test, the pagination disappears, understandably……

is there any work around for this? Any help is appreciated….

Thanks

Answer 1

Never mind, found a solution to implement this……

In documennt.ready function, put something like this inside the if condition for each table……..

$("#productsList").change(function(){

        if(this.value == 'All'){
            All();
            all.fnPageChange( 'first' );
            $('#All').show();
            $('#Test').hide();
            if (Math.ceil((all.fnSettings().fnRecordsDisplay()) / all.fnSettings()._iDisplayLength) > 1)  {
                    $('.dataTables_paginate').css("display", "block");
                } else {
                        $('.dataTables_paginate').hide();
                }

Also, you do a similar if loop when “test” is selected from drop down…

The other way that I tried doing it, (found the above solution more feasible, that’s it)…

Try to identify if the child node is active using jQuery….by putting this inside your if condition of the documenty.ready function when the value changes,

if($('#Test_wrapper #paginate_next').hasClass('paginate_enabled_next') || $('#Test_wrapper #paginate_previous').hasClass('paginate_enabled_next')){
                $('#Test_wrapper .dataTables_paginate').css("display", "block");
            } else {
                $('#Test_wrapper .dataTables_paginate').hide();
            }

Note: The above mentioned method’s only hides your pagination…..

I’ve tried, destroying my old table and recreating it but that was showing a javascript error, didn’t have time to look into it….shall do when I’ve time 🙂

Please let me know, if there is a better solution to this……

Cheers and thanks for taking time to read this off 🙂