CODEWITHSUNDEEP
javascriptjquerydatatables
Shan Khan
Shan Khan

Reputation: 10339

how to enable and disable paging from jquery dataTables on button click

Following is the code found in data table website in order to remove the paging.

    $(document).ready(function() {
    $('#example').DataTable( {
        "paging":   false
    } );
} );

My question is how to enable and disable paging on button click.

as when i call DataTable function second time to same table. It shows error that data table is already initiated and im calling it second time.

Upvotes: 0

Views: 4536

Answers (4)

Bill_VA
Bill_VA

Reputation: 973

I wanted to show only the first 10 rows of the table, but still be able to sort the whole table. But I also wanted the ability to click a link and show the whole table.

Here's what I did: (my table is "ka_ad")

First, turn on paging 

table_ad = $('#ka_ad').DataTable({	
	paging: true,
});

Second (optional: I didn't want to display the datatable pagination links and element, so I hid them with css

#ka_ad_length{display: none;}
#ka_ad_paginate{display: none;}

Lastly, toggle the bPaginate setting (I have a button with an ID of "test"):

$('#test').click( function () {
     //console.log(mytable.settings()[0]['oFeatures']['bPaginate'] ); 
   if(table_ad.settings()[0]['oFeatures']['bPaginate'] == false)
        {
              table_ad.settings()[0]['oFeatures']['bPaginate'] = true;
             $('#test').html('Show All Rows');
        }
   else
        {
              table_ad.settings()[0]['oFeatures']['bPaginate'] = false;
              $('#test').html('Show Fewer Rows');
        }
     table_ad.draw(); 
});

Upvotes: 1

Shan Khan
Shan Khan

Reputation: 10339

simply recreate the dataTable using destroy: true and paging:

Upvotes: 1

Sherali Turdiyev
Sherali Turdiyev

Reputation: 1743

try this:(but i don't guarantee, because, i haven't tested) 

var oTable = $('#example').dataTable();

// get settings object after table is initialized
var oSettings = oTable.fnSettings();
oSettings.paging = false;

$(".button").click(function(){
    oSettings.paging = !oSettings.paging;
});

https://www.datatables.net/forums/discussion/16373/enable-disable-features-after-initializing-the-table

Upvotes: 0

Akki619
Akki619

Reputation: 2432

Try like this.

var oTable;
 $(document).ready(function() {
   oTable =  $('#example').DataTable( {
        "paging":   false
    } );

       $('.btn').click( function () {
        oTable.paging= false;
        oTable.fnDraw();
    });

} );

Upvotes: 0

Related Questions