Update for "Navigation with text input" plugin

Update for "Navigation with text input" plugin

shaileshshailesh Posts: 1Questions: 0Answers: 0
edited April 2014 in Plug-ins
Hi Allan,

While working with Datatable plugin I found one issue with Navigation with text input plugin.
The issue is when user is on first page and click on "Previous" button or "First" button it calls the fnCallbackDraw function again. Same issue with "Next" or "Last" button while on last page.
This issue is significant when doing server side processing as it will hit database unnecessarily.

Please find my fix below and let me know if you agree with the solution:

$.fn.dataTableExt.oPagination.input = {
"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;

nFirst.className = "paginate_button first";
nPrevious.className = "paginate_button previous";
nNext.className="paginate_button next";
nLast.className = "paginate_button last";
nOf.className = "paginate_of";
nPage.className = "paginate_page";

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.type = "text";
nInput.style.width = "15px";
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).click( function () {
if(oSettings._iDisplayStart!=0){ //added fix for click on first button on first page
oSettings.oApi._fnPageChange( oSettings, "first" );
fnCallbackDraw( oSettings );
}
} );

$(nPrevious).click( function() {
if(oSettings._iDisplayStart!=0){ //added fix for click on previous button on first page
oSettings.oApi._fnPageChange( oSettings, "previous" );
fnCallbackDraw( oSettings );
}
} );

$(nNext).click( function() {
if(oSettings._iDisplayStart+oSettings._iDisplayLength < oSettings._iRecordsDisplay){ //added fix for click on next button on last page
oSettings.oApi._fnPageChange( oSettings, "next" );
fnCallbackDraw( oSettings );
}
} );

$(nLast).click( function() {
if(oSettings._iDisplayStart+oSettings._iDisplayLength < oSettings._iRecordsDisplay){ //added fix for click on last button on last page
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', function () { return false; } );
$('span', nPaging).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
This discussion has been closed.