Azaki
/
Plugins
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pagination Input plugin improvements.

Browse Source 
- Reusable functions calcDisableClasses/calcCurrentPage/calcPages - less duplicated code means less errors.
- Reused code for calculating `disabled` classes from main jQuery.dataTables source code to be consistent.
- Moved duplicated strings to constant variables.
- Reworked approach with buttons disabling.
- Totally removed all if-else branches for buttons disabling. Less conditional branching means less errors again :).
- Fixed bug when restoring state in the middle of pages had disabled first/prev buttons.
- It seems it's not required to assign disabled classes to buttons on init, cause they will be assigned on update anyway.
- Reworked on-update loop over each instance of the pager to jQuery.children selector, which already executes for each matched descendant.
- Wrapped all plugin code to IIFE pattern to have private static functions easily, and not expose them to global scope.
pull/220/head
Gordey Doronin 9 years ago
parent 56322760bc
commit 59e1a8205e
1 changed files with 182 additions and 181 deletions
Show Stats Download Patch File Download Diff File

315
pagination/input.js
Unescape View File

@ -12,211 +12,212 @@
* @example * @example
* $(document).ready(function() { * $(document).ready(function() {
* $('#example').dataTable( { * $('#example').dataTable( {
* "sPaginationType": "input" * "pagingType": "input"
* } ); * } );
* } ); * } );
*/ */
$.fn.dataTableExt.oPagination.input = { (function ($) {
"fnInit": function ( oSettings, nPaging, fnCallbackDraw ) function calcDisableClasses(oSettings) {
{ var start = oSettings._iDisplayStart;
var nFirst = document.createElement( 'span' ); var length = oSettings._iDisplayLength;
var nPrevious = document.createElement( 'span' ); var visibleRecords = oSettings.fnRecordsDisplay();
var nNext = document.createElement( 'span' ); var all = length === -1;
var nLast = document.createElement( 'span' );
var nInput = document.createElement( 'input' ); // Gordey Doronin: Re-used this code from main jQuery.dataTables source code. To be consistent.
var nPage = document.createElement( 'span' ); var page = all ? 0 : Math.ceil(start / length);
var nOf = document.createElement( 'span' ); var pages = all ? 1 : Math.ceil(visibleRecords / length);
nFirst.innerHTML = oSettings.oLanguage.oPaginate.sFirst; var disableFirstPrevClass = (page > 0 ? '' : oSettings.oClasses.sPageButtonDisabled);
nPrevious.innerHTML = oSettings.oLanguage.oPaginate.sPrevious; var disableNextLastClass = (page < pages - 1 ? '' : oSettings.oClasses.sPageButtonDisabled);
nNext.innerHTML = oSettings.oLanguage.oPaginate.sNext;
nLast.innerHTML = oSettings.oLanguage.oPaginate.sLast; return {
'first': disableFirstPrevClass,
nFirst.className = "paginate_button first disabled"; 'previous': disableFirstPrevClass,
nPrevious.className = "paginate_button previous disabled"; 'next': disableNextLastClass,
nNext.className="paginate_button next"; 'last': disableNextLastClass
nLast.className = "paginate_button last"; };
nOf.className = "paginate_of"; }
nPage.className = "paginate_page";
nInput.className = "paginate_input"; function calcCurrentPage(oSettings) {
return Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
if ( oSettings.sTableId !== '' ) }
{
nPaging.setAttribute( 'id', oSettings.sTableId+'_paginate' ); function calcPages(oSettings) {
nPrevious.setAttribute( 'id', oSettings.sTableId+'_previous' ); return Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength);
nPrevious.setAttribute( 'id', oSettings.sTableId+'_previous' ); }
nNext.setAttribute( 'id', oSettings.sTableId+'_next' );
nLast.setAttribute( 'id', oSettings.sTableId+'_last' ); var firstClassName = 'first';
} var previousClassName = 'previous';
var nextClassName = 'next';
nInput.type = "text"; var lastClassName = 'last';
nPage.innerHTML = "Page ";
var paginateClassName = 'paginate';
nPaging.appendChild( nFirst ); var paginateOfClassName = 'paginate_of';
nPaging.appendChild( nPrevious ); var paginatePageClassName = 'paginate_page';
nPaging.appendChild( nPage ); var paginateInputClassName = 'paginate_input';
nPaging.appendChild( nInput );
nPaging.appendChild( nOf ); $.fn.dataTableExt.oPagination.input = {
nPaging.appendChild( nNext ); 'fnInit': function (oSettings, nPaging, fnCallbackDraw) {
nPaging.appendChild( nLast ); var nFirst = document.createElement('span');
var nPrevious = document.createElement('span');
$(nFirst).click( function () var nNext = document.createElement('span');
{ var nLast = document.createElement('span');
var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1; var nInput = document.createElement('input');
if (iCurrentPage != 1) var nPage = document.createElement('span');
{ var nOf = document.createElement('span');
oSettings.oApi._fnPageChange( oSettings, "first" );
fnCallbackDraw( oSettings ); var language = oSettings.oLanguage.oPaginate;
$(nFirst).addClass('disabled'); var classes = oSettings.oClasses;
$(nPrevious).addClass('disabled');
$(nNext).removeClass('disabled'); nFirst.innerHTML = language.sFirst;
$(nLast).removeClass('disabled'); nPrevious.innerHTML = language.sPrevious;
nNext.innerHTML = language.sNext;
nLast.innerHTML = language.sLast;
nFirst.className = firstClassName + ' ' + classes.sPageButton;
nPrevious.className = previousClassName + ' ' + classes.sPageButton;
nNext.className = nextClassName + ' ' + classes.sPageButton;
nLast.className = lastClassName + ' ' + classes.sPageButton;
nOf.className = paginateOfClassName;
nPage.className = paginatePageClassName;
nInput.className = paginateInputClassName;
if (oSettings.sTableId !== '') {
nPaging.setAttribute('id', oSettings.sTableId + '_' + paginateClassName);
nFirst.setAttribute('id', oSettings.sTableId + '_' + firstClassName);
nPrevious.setAttribute('id', oSettings.sTableId + '_' + previousClassName);
nNext.setAttribute('id', oSettings.sTableId + '_' + nextClassName);
nLast.setAttribute('id', oSettings.sTableId + '_' + lastClassName);
}
nInput.type = 'text';
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() {
var iCurrentPage = calcCurrentPage(oSettings);
if (iCurrentPage !== 1) {
oSettings.oApi._fnPageChange(oSettings, 'first');
fnCallbackDraw(oSettings);
} }
} ); });
$(nPrevious).click( function() $(nPrevious).click(function() {
{ var iCurrentPage = calcCurrentPage(oSettings);
var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1; if (iCurrentPage !== 1) {
if (iCurrentPage != 1) oSettings.oApi._fnPageChange(oSettings, 'previous');
{
oSettings.oApi._fnPageChange(oSettings, "previous");
fnCallbackDraw(oSettings); fnCallbackDraw(oSettings);
if (iCurrentPage == 2)
{
$(nFirst).addClass('disabled');
$(nPrevious).addClass('disabled');
}
$(nNext).removeClass('disabled');
$(nLast).removeClass('disabled');
} }
} ); });
$(nNext).click( function() $(nNext).click(function() {
{ var iCurrentPage = calcCurrentPage(oSettings);
var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1; if (iCurrentPage !== calcPages(oSettings)) {
if (iCurrentPage != Math.ceil((oSettings.fnRecordsDisplay() / oSettings._iDisplayLength))) oSettings.oApi._fnPageChange(oSettings, 'next');
{
oSettings.oApi._fnPageChange(oSettings, "next");
fnCallbackDraw(oSettings); fnCallbackDraw(oSettings);
if (iCurrentPage == (Math.ceil((oSettings.fnRecordsDisplay() - 1) / oSettings._iDisplayLength) - 1))
{
$(nNext).addClass('disabled');
$(nLast).addClass('disabled');
} }
$(nFirst).removeClass('disabled'); });
$(nPrevious).removeClass('disabled');
}
} );
$(nLast).click( function() $(nLast).click(function() {
{ var iCurrentPage = calcCurrentPage(oSettings);
var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1; if (iCurrentPage !== calcPages(oSettings)) {
if (iCurrentPage != Math.ceil((oSettings.fnRecordsDisplay() / oSettings._iDisplayLength))) oSettings.oApi._fnPageChange(oSettings, 'last');
{
oSettings.oApi._fnPageChange(oSettings, "last");
fnCallbackDraw(oSettings); fnCallbackDraw(oSettings);
$(nFirst).removeClass('disabled');
$(nPrevious).removeClass('disabled');
$(nNext).addClass('disabled');
$(nLast).addClass('disabled');
} }
} ); });
$(nInput).keyup( function (e) { $(nInput).keyup(function (e) {
// 38 = up arrow, 39 = right arrow // 38 = up arrow, 39 = right arrow
if ( e.which == 38 || e.which == 39 ) if (e.which === 38 || e.which === 39) {
{
this.value++; this.value++;
} }
// 37 = left arrow, 40 = down arrow // 37 = left arrow, 40 = down arrow
else if ( (e.which == 37 || e.which == 40) && this.value > 1 ) else if ((e.which === 37 || e.which === 40) && this.value > 1) {
{
this.value--; this.value--;
} }
if ( this.value === "" || this.value.match(/[^0-9]/) ) if (this.value === '' || this.value.match(/[^0-9]/)) {
{
/* Nothing entered or non-numeric character */ /* Nothing entered or non-numeric character */
this.value = this.value.replace(/[^\d]/g, ''); // don't even allow anything but digits this.value = this.value.replace(/[^\d]/g, ''); // don't even allow anything but digits
return; return;
} }
var iNewStart = oSettings._iDisplayLength * (this.value - 1); var iNewStart = oSettings._iDisplayLength * (this.value - 1);
if (iNewStart < 0) if (iNewStart < 0) {
{
iNewStart = 0; iNewStart = 0;
} }
if (iNewStart >= oSettings.fnRecordsDisplay()) if (iNewStart >= oSettings.fnRecordsDisplay()) {
{
iNewStart = (Math.ceil((oSettings.fnRecordsDisplay() - 1) / oSettings._iDisplayLength) - 1) * oSettings._iDisplayLength; iNewStart = (Math.ceil((oSettings.fnRecordsDisplay() - 1) / oSettings._iDisplayLength) - 1) * oSettings._iDisplayLength;
} }
if (iNewStart === 0)
{
$(nFirst).addClass('disabled');
$(nPrevious).addClass('disabled');
$(nNext).removeClass('disabled');
$(nLast).removeClass('disabled');
}
else if (iNewStart == ((Math.ceil((oSettings.fnRecordsDisplay() - 1) / oSettings._iDisplayLength) - 1) * oSettings._iDisplayLength))
{
$(nNext).addClass('disabled');
$(nLast).addClass('disabled');
$(nFirst).removeClass('disabled');
$(nPrevious).removeClass('disabled');
}
else
{
$(nFirst).removeClass('disabled');
$(nPrevious).removeClass('disabled');
$(nNext).removeClass('disabled');
$(nLast).removeClass('disabled');
}
oSettings._iDisplayStart = iNewStart; oSettings._iDisplayStart = iNewStart;
fnCallbackDraw( oSettings ); fnCallbackDraw(oSettings);
} ); });
/* Take the brutal approach to cancelling text selection */ // Take the brutal approach to cancelling text selection.
$('span', nPaging).bind( 'mousedown', function () { return false; } ); $('span', nPaging).bind('mousedown', function () { return false; });
$('span', nPaging).bind( 'selectstart', function () { return false; } ); $('span', nPaging).bind('selectstart', function() { return false; });
// If we can't page anyway, might as well not show it // If we can't page anyway, might as well not show it.
var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength); var iPages = calcPages(oSettings);
if(iPages <= 1) if (iPages <= 1) {
{
$(nPaging).hide(); $(nPaging).hide();
} }
}, },
'fnUpdate': function (oSettings) {
"fnUpdate": function ( oSettings, fnCallbackDraw ) if (!oSettings.aanFeatures.p) {
{
if ( !oSettings.aanFeatures.p )
{
return; return;
} }
var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength);
var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1; var iPages = calcPages(oSettings);
var iCurrentPage = calcCurrentPage(oSettings);
var an = oSettings.aanFeatures.p; var an = oSettings.aanFeatures.p;
if (iPages <= 1) // hide paging when we can't page if (iPages <= 1) // hide paging when we can't page
{ {
$(an).hide(); $(an).hide();
return;
} }
else
{ var disableClasses = calcDisableClasses(oSettings);
$(an).show(); $(an).show();
/* Loop over each instance of the pager */ // Enable/Disable `first` button.
for (var i = 0, iLen = an.length ; i < iLen ; i++) $(an).children('.' + firstClassName)
{ .removeClass(oSettings.oClasses.sPageButtonDisabled)
var spans = an[i].getElementsByTagName('span'); .addClass(disableClasses[firstClassName]);
var inputs = an[i].getElementsByTagName('input');
spans[3].innerHTML = " of " + iPages; // Enable/Disable `prev` button.
inputs[0].value = iCurrentPage; $(an).children('.' + previousClassName)
} .removeClass(oSettings.oClasses.sPageButtonDisabled)
} .addClass(disableClasses[previousClassName]);
// Enable/Disable `next` button.
$(an).children('.' + nextClassName)
.removeClass(oSettings.oClasses.sPageButtonDisabled)
.addClass(disableClasses[nextClassName]);
// Enable/Disable `last` button.
$(an).children('.' + lastClassName)
.removeClass(oSettings.oClasses.sPageButtonDisabled)
.addClass(disableClasses[lastClassName]);
// Paginate of N pages text
$(an).children('.' + paginateOfClassName).html(' of ' + iPages);
// Current page numer input value
$(an).children('.' + paginateInputClassName).val(iCurrentPage);
} }
}; };
})(jQuery)

Write Preview
Loading…
Cancel
Save