CODEWITHSUNDEEP
datatablesdatatables-1.10
Manoj Masakorala
Manoj Masakorala

Reputation: 446

Use existing buttons in datatables

I am trying to trigger an onClick event when click on next or previous buttons in data tables. I checked the IDs of the buttons and they are auto generated. couldn't use those IDs. Is this possible ?

Upvotes: 1

Views: 94

Answers (1)

davidkonrad
davidkonrad

Reputation: 85528

You have a page.dt event, fired each time the paging is updated :

table.on('page.dt', function() {
  var info = table.page.info();
  console.log('Showing page: '+info.page+' of '+info.pages);
});

If you want to target click on the previous / next buttons you can easily do that. To my experience dataTables seems to "eat" the click event simply by updating the view immediately - but you can stay upfront in the chain by listening on the mousedown event instead :

$('.dataTables_wrapper').on('mousedown', '.previous', function() {
  console.log('previous clicked')
})  

$('.dataTables_wrapper').on('mousedown', '.next', function() {
  console.log('next clicked')
})

You need to use a delegated event handler because the dataTable controls is recreated each time the dataTable is redrawn. .dataTables_wrapper, .next and .previous is common for all dataTables.

demo -> http://jsfiddle.net/6jpbyvd4/

Upvotes: 1

Related Questions