Datatable + jquery UI button for pagination

iansinke

I'm using a Datatable with jQuery UI and formatting it myself. In order to make the pagination buttons look nice I'm doing this:

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

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?

Scones

A bit late perhaps, but i just ran in to this myself, and my solution was the following, wich is a bit of a hack, better solutions are welcome:

Add the following above the call to dataTables:

[code]
$.fn.dataTableExt.oStdClasses.sPagePrevEnabled = "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
$.fn.dataTableExt.oStdClasses.sPageNextEnabled = "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
$.fn.dataTableExt.oStdClasses.sPagePrevDisabled = "ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled ui-button-text-only";
$.fn.dataTableExt.oStdClasses.sPageNextDisabled = "ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled ui-button-text-only";
[/code]

then add fnDrawCallback function:

[code]
"fnDrawCallback": function () {
//Add a span inside each anchor tag if no span tag exists already.
$(this).parent().find(".dataTables_paginate a").each(function () {
if ($(this).children("span").length === 0) {
$(this).html('' + $(this).html() + '');
}
});
}
[/code]

what this does is basicly add all the classes that the jQuery button function does. but manually.

it would however be preferable to have some sort of "renderComplete" event that triggers after everything is done and displayed.