jQuery UI Pagination Plugin

zepernick

Thought I would pass this along. I updated the "Navigation with text input" pagination plugin to use the jQuery UI navigation buttons. Thanks for all the work put into this project!

[code]
$.fn.dataTableExt.oPagination.input = {
"fnInit": function ( oSettings, nPaging, fnCallbackDraw )
{
var nInput = document.createElement( 'input' );
var nPage = $( '' ).html("Page ");
var nOf = document.createElement( 'span' );


var pagingTable = $("");
var pagingTableTr = $("");
var pagingTableTd;
var pageIcon;

pagingTable.append(pagingTableTr);

//Go to first page icon
pagingTableTd = $("");
pageIcon = $("").addClass("ui-icon ui-icon-seek-first")
.click(function(){
oSettings.oApi._fnPageChange( oSettings, "first" );
fnCallbackDraw( oSettings );
})
.hover(function() {
$(this).parent().addClass("ui-state-hover");
},
function() {
$(this).parent().removeClass("ui-state-hover");
});

pagingTableTd.append(pageIcon);
pagingTableTr.append(pagingTableTd);

//Go to previous page icon
pagingTableTd = $("");
pageIcon = $("").addClass("ui-icon ui-icon-seek-prev")
.click(function(){
oSettings.oApi._fnPageChange( oSettings, "previous" );
fnCallbackDraw( oSettings );
})
.hover(function() {
$(this).parent().addClass("ui-state-hover");
},
function() {
$(this).parent().removeClass("ui-state-hover");
});
pagingTableTd.append(pageIcon);
pagingTableTr.append(pagingTableTd);

pagingTableTd = $("");
pagingTableTd.append(nPage);
pagingTableTr.append(pagingTableTd);

//page text box
pagingTableTd = $("");
nInput = $("").attr("type", "text").css("width", "15px").css("display", "inline");
pagingTableTd.append(nInput);
pagingTableTr.append(pagingTableTd);

//of page message
pagingTableTd = $("");
nOf = $("").addClass("paginate_of").html("here");
pagingTableTd.append(nOf);
pagingTableTr.append(pagingTableTd);

//Go to next page icon
pagingTableTd = $("");
pageIcon = $("").addClass("ui-icon ui-icon-seek-next")
.click(function(){
oSettings.oApi._fnPageChange( oSettings, "next" );
fnCallbackDraw( oSettings );
})
.hover(function() {
$(this).parent().addClass("ui-state-hover");
},
function() {
$(this).parent().removeClass("ui-state-hover");
});

pagingTableTd.append(pageIcon);
pagingTableTr.append(pagingTableTd);


//Go to last page icon
pagingTableTd = $("");
pageIcon = $("").addClass("ui-icon ui-icon-seek-end")
.click(function(){
oSettings.oApi._fnPageChange( oSettings, "last" );
fnCallbackDraw( oSettings );
})
.hover(function() {
$(this).parent().addClass("ui-state-hover");
},
function() {
$(this).parent().removeClass("ui-state-hover");
});

pagingTableTd.append(pageIcon);
pagingTableTr.append(pagingTableTd);

nPaging.appendChild(pagingTable[0]);


/* if ( oSettings.sTableId !== '' )
{
nPaging.setAttribute( 'id', oSettings.sTableId+'_paginate' );
nPrevious.setAttribute( 'id', oSettings.sTableId+'_previous' );
nPrevious.setAttribute( 'id', oSettings.sTableId+'_previous' );
nNext.setAttribute( 'id', oSettings.sTableId+'_next' );
nLast.setAttribute( 'id', oSettings.sTableId+'_last' );
}*/


$(nInput).keyup( function (e) {

if ( e.which == 38 || e.which == 39 )
{
this.value++;
}
else if ( (e.which == 37 || e.which == 40) && this.value > 1 )
{
this.value--;
}

if ( this.value == "" || this.value.match(/[^0-9]/) )
{
/* Nothing entered or non-numeric character */
return;
}

var iNewStart = oSettings._iDisplayLength * (this.value - 1);
if ( iNewStart > oSettings.fnRecordsDisplay() )
{
/* Display overrun */
oSettings._iDisplayStart = (Math.ceil((oSettings.fnRecordsDisplay()-1) /
oSettings._iDisplayLength)-1) * oSettings._iDisplayLength;
fnCallbackDraw( oSettings );
return;
}

oSettings._iDisplayStart = iNewStart;
fnCallbackDraw( oSettings );
} );

},


"fnUpdate": function ( oSettings, fnCallbackDraw )
{
if ( !oSettings.aanFeatures.p )
{
return;
}
var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength);
var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;

/* Loop over each instance of the pager */
var an = oSettings.aanFeatures.p;
for ( var i=0, iLen=an.length ; i

allan

Very cool - thanks for sharing with us!

Allan