Navigation with buttons and input text plugin

iuliandum

I made this plugin. I hope it will be useful.
http://i.imgur.com/aevJZ.jpg
[code]
$.fn.dataTableExt.oPagination.buttons_input = {
"fnInit": function ( oSettings, nPaging, fnCallbackDraw )
{
nFirst = document.createElement( 'span' );
nPrevious = document.createElement( 'span' );
nNext = document.createElement( 'span' );
nLast = document.createElement( 'span' );
nInput = document.createElement( 'input' );
pag = document.createElement( 'span' );
nPage = document.createElement( 'span' );
nOf = document.createElement( 'span' );

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



nInput.type = "text";
nInput.style.width = "16px";
nInput.style.display = "inline";
nInput.style.visibility = "hidden";

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

$(nFirst).click( function () {
if ( oSettings._iDisplayStart != 0 ) {
oSettings.oApi._fnPageChange( oSettings, "first" );
fnCallbackDraw( oSettings );
}
} );

$(nPrevious).click( function() {
if ( oSettings._iDisplayStart != 0 ) {
oSettings.oApi._fnPageChange( oSettings, "previous" );
fnCallbackDraw( oSettings );
}
} );

$(nNext).click( function() {
if ( oSettings.fnDisplayEnd() < oSettings.fnRecordsDisplay() ) {
oSettings.oApi._fnPageChange( oSettings, "next" );
fnCallbackDraw( oSettings );
}
} );

$(nLast).click( function() {
if ( oSettings.fnDisplayEnd() < oSettings.fnRecordsDisplay() ) {
oSettings.oApi._fnPageChange( oSettings, "last" );
fnCallbackDraw( oSettings );
}
} );

$(nInput).click(function () {
this.select();
})

$(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', function () { return false; } );
$('span', nPaging).bind( 'selectstart', function () { return false; } );

/* Disallow text selection */
$(nFirst).bind( 'selectstart', function () { return false; } );
$(nPrevious).bind( 'selectstart', function () { return false; } );
$(nNext).bind( 'selectstart', function () { return false; } );
$(nLast).bind( 'selectstart', function () { return false; } );
},

"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= oSettings.fnRecordsDisplay() )
{
buttons[2].className = "paginate_disabled_next";
buttons[3].className = "paginate_disabled_last";
}
else
{
buttons[2].className = "paginate_enabled_next";
buttons[3].className = "paginate_enabled_last";
}
}
}
}
[/code]

iuliandum

It should be added in demo_table.css

[code]
.paginate_disabled_first, .paginate_disabled_previous, .paginate_enabled_previous, .paginate_enabled_first, .paginate_disabled_next, .paginate_disabled_last, .paginate_enabled_next, .paginate_enabled_last {
height: 19px;
width: 19px;
margin-left: 3px;
float: left;
}

.paginate_disabled_first {
background-image: url('../images/first_disabled.jpg');
}

.paginate_enabled_first {
background-image: url('../images/first_enabled.jpg');
}

.paginate_disabled_last {
background-image: url('../images/last_disabled.jpg');
}

.paginate_enabled_last {
background-image: url('../images/last_enabled.jpg');
}

[/code]

The result is that
http://i.imgur.com/aevJZ.jpg