jQuery themed pagination

TomC

I needed to use jQuery themed buttons for my pagination so I rewrote the two button pagination plug-in and created a themed pagination plugin. Now you can use any theme that you make with the jQuery theme roller to control the look of your pagination buttons.
Call it by using:
[code]$('#example').dataTable({
"sPaginationType": "themed"
});[/code]

Here is the plug-in code:
[code]
jQuery.fn.dataTableExt.oPagination.themed = {
/*
* Function: oPagination.themed.fnInit
* Purpose: Initalise dom elements required for using jQuery themes
* Returns: -
* Inputs: object:oSettings - dataTables settings object
* function:fnCallbackDraw - draw function which must be called on update
*/
"fnInit": function ( oSettings, fnCallbackDraw )
{
oSettings.nPrevious = $( '' );
oSettings.nNext = $( '' );
oSettings.nPaginate = $( oSettings.nPaginate );

if ( oSettings.sTableId !== '' )
{
oSettings.nPaginate.attr( 'id', oSettings.sTableId+'_paginate' );
oSettings.nPrevious.attr("id", oSettings.sTableId+'_previous' );
oSettings.nNext.attr("id", oSettings.sTableId+'_next' );
}

oSettings.nPaginate.append( oSettings.nPrevious );
oSettings.nPaginate.append( oSettings.nNext );
oSettings.nPaginate.insertAfter( oSettings.nTable );

oSettings.nPrevious.click( function() {
oSettings.iDisplayStart -= oSettings.iDisplayLength;

/* Correct for underrun */
if ( oSettings.iDisplayStart < 0 )
{
oSettings.iDisplayStart = 0;
}

fnCallbackDraw( oSettings );
} );

$(oSettings.nNext).click( function() {
/* Make sure we are not over running the display array */
if ( oSettings.iDisplayStart + oSettings.iDisplayLength < oSettings.aiDisplay.length )
{
oSettings.iDisplayStart += oSettings.iDisplayLength;
}

fnCallbackDraw( oSettings );
} );
},

/*
* Function: oPagination.themed.fnUpdate
* Purpose: Update the two button themed pagination at the end of the draw
* Returns: -
* Inputs: object:oSettings - dataTables settings object
* function:fnCallbackDraw - draw function which must be called on update
*/
"fnUpdate": function ( oSettings, fnCallbackDraw )
{
oSettings.nPrevious.toggleClass("ui-state-default", oSettings.iDisplayStart === 0 ).toggleClass("ui-state-active", oSettings.iDisplayStart != 0 );
oSettings.nNext.toggleClass("ui-state-default", oSettings.iDisplayEnd == oSettings.aiDisplay.length ).toggleClass("ui-state-active", oSettings.iDisplayEnd != oSettings.aiDisplay.length );

}
};

[/code]

You will also need to change the dataTable.css a little. Replace the pagination section with this:
[code]
.dataTables_paginate {
float: right;
text-align: right;
}

/* Pagination nested */
.dataTables_paginate div {
padding: 3px 0;
float:left;
}
.dataTables_paginate div span {
margin: 0 3px;
}
[/code]


Caveats: I'm pretty new to datatables and jQuery though I've been writing js for a long time :) If you see any wasteful jQuery calls let me know.

Here is a screenshot of my jQuery themed datatable:
[code]
http://yfrog.com/5fpicture1uoap
[/code]

allan

Hi TomC,

That's outstanding - thanks! Adding support for jQuery UI themes is something I'd very much like to do for DataTables (it's on the to-do list - just not managed to find the time yet!) and when I do look at this, I'll certainly be using this as a basis! The one trick that I want to be able to do is to make it backwards compatible with current installations / theming. Hopefully in a release sometime soon!

Regards,
Allan

zoggy

Hey TomC, I tried to use your code and it just made the pagination controls disapper :(
I'm actually trying to get all the table controls (filter/info/pagination) all on the same div just like you have.

Care to share how you did it?

--zog

TomC

This is pretty old now. Allan has since implemented a version of this code in the base plug-in. You should be able to do everything you want wit bJQueryUI and sDom now.

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