Pagination - Navigation with text input

dnzone88

Hello, I'm still very new to jQuery, so i need some help.
I would like to modify the Navigation with text input plug in and change the First, Last, Previous, Next button to image file just like the two_button pagination type. Can anyone help me on this. Thanks

dennis,

allan

Hi dennis,

Have you had a hack at this yet? It should be just a case of combining the source for the standard DataTables paging functions with the input plug-in.

Regards,
Allan

dnzone88

hello allan, thanks for the fast reply, i did try n modify the plug-in but when i run the code. the image did not display. can u check on my code see where i did wrong. i split the code into 2 part because its too big to fit in.
[code]
"fnInit": function ( oSettings, fnCallbackDraw )
{
var nPaging = oSettings.anFeatures.p;
oSettings.nFirst = document.createElement( 'div' );
oSettings.nPrevious = document.createElement( 'div' );
oSettings.nNext = document.createElement( 'div' );
oSettings.nLast = document.createElement( 'div' );
var nInput = document.createElement( 'input' );
var nPage = document.createElement( 'span' );
var nOf = document.createElement( 'span' );

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

oSettings.nFirst.className = "paginate_disabled_first";
oSettings.nPrevious.className = "paginate_disabled_previous";
oSettings.nNext.className="paginate_disabled_next";
oSettings.nLast.className = "paginate_disabled_last";
nOf.className = "paginate_of";
nPage.className = "paginate_page";

nInput.type = "text";
nInput.style.width = "15px";
nInput.style.display = "inline";
nPage.innerHTML = "Page ";

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

$(oSettings.nFirst).click( function () {
oSettings._iDisplayStart = 0;
fnCallbackDraw( oSettings );
} );

$(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.fnRecordsDisplay() )
{
oSettings._iDisplayStart += oSettings._iDisplayLength;
}

fnCallbackDraw( oSettings );
} );

$(oSettings.nLast).click( function() {
var iPages = parseInt( (oSettings.fnRecordsDisplay()-1) / oSettings._iDisplayLength, 10 ) + 1;
oSettings._iDisplayStart = (iPages-1) * oSettings._iDisplayLength;

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


oSettings.nPagingOf = nOf;
oSettings.nPagingInput = nInput;
},

[/code]

dnzone88

the second part of the code is below.
[code]
"fnUpdate": function ( oSettings, fnCallbackDraw )
{
if ( !oSettings.anFeatures.p )
{
return;
}

var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength);
var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;

oSettings.nPagingOf.innerHTML = " of "+iPages
oSettings.nPagingInput.value = iCurrentPage;

oSettings.nFirst.className =
( oSettings._iDisplayStart === 0 ) ?
"paginate_disabled_first" : "paginate_enabled_first";

oSettings.nPrevious.className =
( oSettings._iDisplayStart === 0 ) ?
"paginate_disabled_previous" : "paginate_enabled_previous";

oSettings.nNext.className =
( oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay() ) ?
"paginate_disabled_next" : "paginate_enabled_next";

oSettings.nLast.className =
( oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay() ) ?
"paginate_disabled_last" : "paginate_enabled_last";

}
};
[/code]

allan

Hi dennis,

Thanks for pasting in your code. I just tried it exactly as you pasted and the images show up okay for me. Have you got Firebug (or similar) handy? It might be worth checking to see if the css image paths are okay.

Regards,
Allan

dnzone88

hello allan.

Thanks for the help. As i have found out the code is working just that i have put the worng extension for the image in the css file. So sorry about that. Thanks anyway.

allan

Hi dennis,

No problem - good to hear you got it sorted in the end :-)

Regards,
Allan