Update for "Navigation with text input" plugin

geoffb

Hi Allan,

I've gotten a lot of use out of DataTables so far and recently I've been using your Navigation with text input pagination plug-in. I patched your code that's on the Plug-ins page to accommodate passthrough styles and to properly disable the buttons on first, last, 0 pages. Hope this saves you or someone else a few minutes of work.

Geoff


[code]
$.fn.dataTableExt.oPagination.input = {
/*
* Function: oPagination.input.fnInit
* Purpose: Initalise dom elements required for pagination with input textbox
* Returns: -
* Inputs: object:oSettings - dataTables settings object
* node:nPaging - the DIV which contains this pagination control
* function:fnCallbackDraw - draw function which must be called on update
*/
"fnInit": function ( oSettings, nPaging, fnCallbackDraw )
{
var nFirst = document.createElement( 'span' );
var nPrevious = document.createElement( 'span' );
var nNext = document.createElement( 'span' );
var nLast = document.createElement( 'span' );
var nInput = document.createElement( 'input' );
var nPage = document.createElement( 'span' );
var nOf = document.createElement( 'span' );

nFirst.innerHTML = oSettings.oLanguage.oPaginate.sFirst;
nPrevious.innerHTML = oSettings.oLanguage.oPaginate.sPrevious;
nNext.innerHTML = oSettings.oLanguage.oPaginate.sNext;
nLast.innerHTML = oSettings.oLanguage.oPaginate.sLast;

var oClasses = oSettings.oClasses;
nFirst.className = oClasses.sPageButton+" "+oClasses.sPageFirst;
nPrevious.className = oClasses.sPageButton+" "+oClasses.sPagePrevious;
nNext.className= oClasses.sPageButton+" "+oClasses.sPageNext;
nLast.className = oClasses.sPageButton+" "+oClasses.sPageLast;
nInput.className = "paginate_textInput";
nOf.className = "paginate_of";
nPage.className = "paginate_page";

nInput.type = "text";
nInput.style.width = "35px";
nInput.style.textAlign = "right";
nInput.style.display = "inline";
nPage.innerHTML = "Page ";

nPaging.appendChild( nFirst );
nPaging.appendChild( nPrevious );
nPaging.appendChild( nPage );
nPaging.appendChild( nInput );
nPaging.appendChild( nOf );
nPaging.appendChild( nNext );
nPaging.appendChild( nLast );

$(nFirst).bind( 'click.DT', function () {
if ( oSettings.oApi._fnPageChange( oSettings, "first" ) )
{
fnCallbackDraw( oSettings );
}
} );

$(nPrevious).bind( 'click.DT', function() {
if ( oSettings.oApi._fnPageChange( oSettings, "previous" ) )
{
fnCallbackDraw( oSettings );
}
} );

$(nNext).bind( 'click.DT', function() {
if ( oSettings.oApi._fnPageChange( oSettings, "next" ) )
{
fnCallbackDraw( oSettings );
}
} );

$(nLast).bind( 'click.DT', function() {
if ( oSettings.oApi._fnPageChange( oSettings, "last" ) )
{
fnCallbackDraw( oSettings );
}
} );

$(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 );
} );

/* Take the brutal approach to cancelling text selection */
$('span', nPaging)
.bind( 'mousedown.DT', function () { return false; } )
.bind( 'selectstart.DT', function () { return false; } );

if ( oSettings.sTableId !== '' && typeof oSettings.aanFeatures.p == "undefined" )
{
nPaging.setAttribute( 'id', oSettings.sTableId+'_paginate' );
nFirst.setAttribute( 'id', oSettings.sTableId+'_first' );
nPrevious.setAttribute( 'id', oSettings.sTableId+'_previous' );
nNext.setAttribute( 'id', oSettings.sTableId+'_next' );
nLast.setAttribute( 'id', oSettings.sTableId+'_last' );
}
},

/*
* Function: oPagination.input.fnUpdate
* Purpose: Update the input element
* Returns: -
* Inputs: object:oSettings - dataTables settings object
* function:fnCallbackDraw - draw function which must be called on update
*/
"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;
var oClasses = oSettings.oClasses;

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

allan

Hi Geoff,

Awesome stuff - thanks for posting this. I'll update the plug-in code with your updates shortly.

Regards,
Allan

geoffb

No problem, HTH

gregb

Thanks for the code Geoff. I am not sure if you encountered this or not, but I had minor issues when the table had no rows (textbox showed 1 instead of 0), a single row (textbox allowed user to increment the page # with the arrow keys even though no further rows exist), and the same # of rows as the table display length (allowed a user to go to the next page even though there wasn't one). I've listed my fixes below:

No rows issue
----------------
In fnUpdate, add the line: inputs[0].value = iPages;
within the following If clause code block:
if ( iPages === 0 || iCurrentPage == iPages || oSettings._iDisplayLength == -1 )

so it would read like this:
if ( iPages === 0 || iCurrentPage == iPages || oSettings._iDisplayLength == -1 )
{
inputs[0].value = iPages;


Same # of rows as table display length
---------------------------------
in fnInit, change the greater than sign to be a greater than or equal to sign, so that it would change from: if ( iNewStart > oSettings.fnRecordsDisplay() )
to: if ( iNewStart >= oSettings.fnRecordsDisplay() )


Single row issue
--------------
In fnInit for the same If clause that we just modified above, add the line within the code block: if(oSettings._iDisplayStart < 0) oSettings._iDisplayStart = 0;

so it will read like this:

if ( iNewStart >= oSettings.fnRecordsDisplay() )
{
/* Display overrun */
oSettings._iDisplayStart = (Math.ceil((oSettings.fnRecordsDisplay()-1) /
oSettings._iDisplayLength)-1) * oSettings._iDisplayLength;
if(oSettings._iDisplayStart < 0) oSettings._iDisplayStart = 0;
...

I hope the above modifications help and thanks again for the code. It saved me a lot of time.

Greg

geoffb

Nice! Thanks for the corrections. I hadn't come across that yet. I'm sure it would have annoyed me to no end. :)