From dfe092f57d234281be86374d0fba064e6e9322eb Mon Sep 17 00:00:00 2001 From: Soufiane Ghzal Date: Fri, 6 Jun 2014 11:23:57 +0200 Subject: [PATCH] Cleaning extstyle pagination plugin All were buggy with serverside table. Also made it more consistant --- pagination/extjs.js | 207 +++++++++++++++++++++++++------------------- 1 file changed, 119 insertions(+), 88 deletions(-) diff --git a/pagination/extjs.js b/pagination/extjs.js index 86b1e1b..6063488 100644 --- a/pagination/extjs.js +++ b/pagination/extjs.js @@ -14,93 +14,124 @@ * } ); */ +$.fn.dataTableExt.oApi.fnExtStylePagingInfo = function ( oSettings ) +{ + return { + "iStart": oSettings._iDisplayStart, + "iEnd": oSettings.fnDisplayEnd(), + "iLength": oSettings._iDisplayLength, + "iTotal": oSettings.fnRecordsTotal(), + "iFilteredTotal": oSettings.fnRecordsDisplay(), + "iPage": oSettings._iDisplayLength === -1 ? + 0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ), + "iTotalPages": oSettings._iDisplayLength === -1 ? + 0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength ) + }; +}; + $.fn.dataTableExt.oPagination.extStyle = { - "fnInit": function (oSettings, nPaging, fnCallbackDraw) { - nFirst = $('', { 'class': 'paginate_button first' }); - nPrevious = $('', { 'class': 'paginate_button previous' }); - nNext = $('', { 'class': 'paginate_button next' }); - nLast = $('', { 'class': 'paginate_button last' }); - nPageTxt = $("", { text: 'Page' }); - nPageNumBox = $('', { type: 'text', val: 1, 'class': 'pageinate_input_box' }); - nPageOf = $('', { text: 'of' }); - nTotalPages = $('', { text: parseInt(oSettings.aoData.length / oSettings._iDisplayLength, 10) }); - - $(nPaging) - .append(nFirst) - .append(nPrevious) - .append(nPageTxt) - .append(nPageNumBox) - .append(nPageOf) - .append(nTotalPages) - .append(nNext) - .append(nLast); - - nFirst.click(function () { - oSettings.oApi._fnPageChange(oSettings, "first"); - fnCallbackDraw(oSettings); - nPageNumBox.val(parseInt(oSettings._iDisplayEnd / oSettings._iDisplayLength, 10)); - }).bind('selectstart', function () { return false; }); - - nPrevious.click(function () { - oSettings.oApi._fnPageChange(oSettings, "previous"); - fnCallbackDraw(oSettings); - nPageNumBox.val(parseInt(oSettings._iDisplayEnd / oSettings._iDisplayLength, 10)); - }).bind('selectstart', function () { return false; }); - - nNext.click(function () { - oSettings.oApi._fnPageChange(oSettings, "next"); - fnCallbackDraw(oSettings); - nPageNumBox.val(parseInt(oSettings._iDisplayEnd / oSettings._iDisplayLength, 10)); - }).bind('selectstart', function () { return false; }); - - nLast.click(function () { - oSettings.oApi._fnPageChange(oSettings, "last"); - fnCallbackDraw(oSettings); - nPageNumBox.val(parseInt(oSettings._iDisplayEnd / oSettings._iDisplayLength,10 )); - }).bind('selectstart', function () { return false; }); - - nPageNumBox.focus(function () { - $(this).attr("style", "border-color: #D0B39A"); - }).blur(function () { - $(this).attr("style", "border-color: #C9C9C9"); - }).change(function () { - var pageValue = parseInt($(this).val(), 10); - if ((pageValue !== NaN) && pageValue > 0 && pageValue < oSettings.aoData.length) { - oSettings._iDisplayStart = $(this).val(); - fnCallbackDraw(oSettings); - } - }); - - }, - - - "fnUpdate": function (oSettings, fnCallbackDraw) { - if (!oSettings.aanFeatures.p) { - return; - } - - /* Loop over each instance of the pager */ - var an = oSettings.aanFeatures.p; - for (var i = 0, iLen = an.length; i < iLen; i++) { - //var buttons = an[i].getElementsByTagName('span'); - var buttons = $(an[i]).find('span.paginate_button'); - if (oSettings._iDisplayStart === 0) { - buttons.eq(0).attr("class", "paginate_disabled_first paginate_button"); - buttons.eq(1).attr("class", "paginate_disabled_previous paginate_button"); - } - else { - buttons.eq(0).attr("class", "paginate_enabled_first paginate_button"); - buttons.eq(1).attr("class", "paginate_enabled_previous paginate_button"); - } - - if (oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay()) { - buttons.eq(2).attr("class", "paginate_disabled_next paginate_button"); - buttons.eq(3).attr("class", "paginate_disabled_last paginate_button"); - } - else { - buttons.eq(2).attr("class", "paginate_enabled_next paginate_button"); - buttons.eq(3).attr("class", "paginate_enabled_last paginate_button"); - } - } - } + + + "fnInit": function (oSettings, nPaging, fnCallbackDraw) { + + var oPaging = oSettings.oInstance.fnExtStylePagingInfo(); + + nFirst = $('', { 'class': 'paginate_button first' , text : "<<" }); + nPrevious = $('', { 'class': 'paginate_button previous' , text : "<" }); + nNext = $('', { 'class': 'paginate_button next' , text : ">" }); + nLast = $('', { 'class': 'paginate_button last' , text : ">>" }); + nPageTxt = $("", { text: 'Page' }); + nPageNumBox = $('', { type: 'text', val: 1, 'class': 'pageinate_input_box' }); + nPageOf = $('', { text: '/' }); + nTotalPages = $('', { class : "paginate_total" , text : oPaging.iTotalPages }); + + + $(nPaging) + .append(nFirst) + .append(nPrevious) + .append(nPageTxt) + .append(nPageNumBox) + .append(nPageOf) + .append(nTotalPages) + .append(nNext) + .append(nLast); + + nFirst.click(function () { + if( $(this).hasClass("disabled") ) + return; + oSettings.oApi._fnPageChange(oSettings, "first"); + fnCallbackDraw(oSettings); + }).bind('selectstart', function () { return false; }); + + nPrevious.click(function () { + if( $(this).hasClass("disabled") ) + return; + oSettings.oApi._fnPageChange(oSettings, "previous"); + fnCallbackDraw(oSettings); + }).bind('selectstart', function () { return false; }); + + nNext.click(function () { + if( $(this).hasClass("disabled") ) + return; + oSettings.oApi._fnPageChange(oSettings, "next"); + fnCallbackDraw(oSettings); + }).bind('selectstart', function () { return false; }); + + nLast.click(function () { + if( $(this).hasClass("disabled") ) + return; + oSettings.oApi._fnPageChange(oSettings, "last"); + fnCallbackDraw(oSettings); + }).bind('selectstart', function () { return false; }); + + nPageNumBox.change(function () { + var pageValue = parseInt($(this).val(), 10) - 1 ; // -1 because pages are 0 indexed, but the UI is 1 + var oPaging = oSettings.oInstance.fnPagingInfo(); + + if(pageValue === NaN || pageValue<0 ){ + pageValue = 0; + }else if(pageValue >= oPaging.iTotalPages ){ + pageValue = oPaging.iTotalPages -1; + } + oSettings.oApi._fnPageChange(oSettings, pageValue); + fnCallbackDraw(oSettings); + }); + + }, + + + "fnUpdate": function (oSettings, fnCallbackDraw) { + if (!oSettings.aanFeatures.p) { + return; + } + + var oPaging = oSettings.oInstance.fnExtStylePagingInfo(); + + /* Loop over each instance of the pager */ + var an = oSettings.aanFeatures.p; + + $(an).find('span.paginate_total').html(oPaging.iTotalPages); + $(an).find('.pageinate_input_box').val(oPaging.iPage+1); + + $(an).each(function(index,item) { + + var $item = $(item); + + if (oPaging.iPage == 0) { + var prev = $item.find('span.paginate_button.first').add($item.find('span.paginate_button.previous')); + prev.addClass("disabled"); + }else { + var prev = $item.find('span.paginate_button.first').add($item.find('span.paginate_button.previous')); + prev.removeClass("disabled"); + } + + if (oPaging.iPage+1 == oPaging.iTotalPages) { + var next = $item.find('span.paginate_button.last').add($item.find('span.paginate_button.next')); + next.addClass("disabled"); + }else { + var next = $item.find('span.paginate_button.last').add($item.find('span.paginate_button.next')); + next.removeClass("disabled"); + } + }); + } };