jQuery button style only being applied to buttons in first page of Datatable

I’ve tried to search the internet for a similar issue, but I don’t know how to word it.

I have a Datatable which shows data on multiple pages. In each row I have a button with the class “opt”. Then in the document ready function, I initialize the buttons with the follow:

$(function() {
    $( ".opt" ).button({
      icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
      },
      text: false
    });
});

When I load the page, however, this jQuery styling has only been applied to buttons on the first page. The buttons on the other page show up as a normal button would. Thanks for any suggestions.

Answer

Yes so this is the case like I mentioned above.

// Re-draws the table on update.
table.draw();

Is a function that is triggered when there is a change in the table.

What you would want to do is follow harco’s suggestion. You would need to add a snippet of code like the following, my example will use Jquery.

// On every pagination click
// paginate_button is a class given to the pagination buttons in the datatable.
$('.paginate_button').click(function(){

   // You might have to add a setTimeout function 
   // here to make sure the datatable is done loading.

   $( ".opt" ).button({
      icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
      },
      text: false
    });
});

Info on the datatable events http://www.datatables.net/manual/events

This is what you should try as shown on the datatable page.

var table = $('#example').DataTable();

table.on( 'draw', function () {
    // your code here
} );

What this will do is it will setup your function on the updated datatable that was re-drawn.

Hope this is a good example and explanation

Leave a Reply

Your email address will not be published. Required fields are marked *