Question

I’m using a Datatable (as in Datatables.net) and formatting it myself. In order to make the pagination buttons look nice I’m doing this:

$(function(){
    $('#data').dataTable({
        "fnDrawCallback" : function() {
            $('#data_next').button();
            $('#data_previous').button();
        }           
    });
} );

The problem is, although the fnDrawCallback event gets fired when the page is changed, the .button() calls seem to be happening before the Datatable is finished with the DOM. It looks like the inside the still has the Button classes on it, but the itself has them removed.

I thought the fnDrawCallback happened after the Datatable was finshed drawing, but apparently not.

Suggestions?

Answer 1

You should read the documentation, your answer is there:

http://datatables.net/styling/custom_classes

One other thing to consider is that DataTable as full Jquery UI integration:

http://datatables.net/examples/basic_init/themes.html

With this Initialization:

$(document).ready(function() {
  oTable = $('#example').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers"
  });
});

You just need to set your preferred theme and make what ever changes you want to the css.

---

Going a litle further, take a look at the dataTable demo for the Jquery UI ThemeRoller support:
http://datatables.net/styling/themes/redmond