From f7396d7dd35ca4e7c36963d98371deb823dd80dd Mon Sep 17 00:00:00 2001 From: Manjul Srivastava Date: Mon, 17 Dec 2018 18:11:46 +0530 Subject: [PATCH] Added new plugin multi_navigation_pagination.js --- pagination/multi_navigation_pagination.js | 228 ++++++++++++++++++++++ 1 file changed, 228 insertions(+) create mode 100644 pagination/multi_navigation_pagination.js diff --git a/pagination/multi_navigation_pagination.js b/pagination/multi_navigation_pagination.js new file mode 100644 index 0000000..408fc47 --- /dev/null +++ b/pagination/multi_navigation_pagination.js @@ -0,0 +1,228 @@ +/** + * This pagination plugin provide page number drop down with first, previous, next and last page navigation buttons + *@author Manjul Srivastava + * + */ + +// Referenced from multiple existing pagination plugins and JPaginator +$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings) +{ + if ( 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 ) + } + } + else { + return { + "iStart": 0, + "iEnd": 0, + "iLength": 0, + "iTotal": 0, + "iFilteredTotal": 0, + "iPage": 0, + "iTotalPages": 0 + } + } +}; + +$.fn.dataTableExt.oPagination.jPaginator = { + 'paginator': $('').html ( '
'), + 'fnInit': function ( oSettings, nPaging, fnCallbackDraw) { + $(nPaging).prepend ( this.paginator); + $(this.paginator).jPaginator ( { + selectedPage: 1, + nbPages: 1, + nbVisible: 6, + overBtnLeft: '#o_left', + overBtnRight: '#o_right', + maxBtnLeft: '#m_left', + maxBtnRight: '#m_right', + minSlidesForSlider: 2, + onPageClicked: function ( a, num) { + if ( num - 1 == Math.ceil ( oSettings._iDisplayStart / oSettings._iDisplayLength)) { + return; + } + oSettings._iDisplayStart = ( num - 1) * oSettings._iDisplayLength; + fnCallbackDraw ( oSettings); + } + }).addClass ( 'jPaginator'); + }, + 'fnUpdate': function ( oSettings, fnCallbackDraw) { + if ( ! oSettings.aanFeatures.p) { + return; + } + var oPaging = oSettings.oInstance.fnPagingInfo (); + $(this.paginator).trigger ( 'reset', { nbVisible: 6, selectedPage: oPaging.iPage + 1, nbPages: oPaging.iTotalPages}); + } +}; + +$.fn.dataTableExt.oPagination.multiNavPagation = { + + + "fnInit": function (oSettings, nPaging, fnCallbackDraw) { + + var oPaging = oSettings.oInstance.fnPagingInfo(); + + 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 }); + + var nInput = document.createElement('select'); + var nPage = document.createElement('span'); + var nPage1 = document.createElement('span'); + var nPage2 = document.createElement('span'); + var nOf = document.createElement('span'); + nOf.className = "paginate_of"; + nPage.className = "paginate_page"; + if (oSettings.sTableId !== '') { + nPaging.setAttribute('id', oSettings.sTableId + '_paginate'); + } + nInput.style.display = "inline"; + nPage.innerHTML = "Page "; + + $(nPaging) + .append(nFirst) + .append(nPrevious) + .append(nInput) + .append(nOf) + .append(nNext) + .append(nLast); + + $(nInput).change(function (e) { + window.scroll(0,0); + if (this.value === "" || this.value.match(/[^0-9]/)) { + return; + } + var iNewStart = oSettings._iDisplayLength * (this.value - 1); + if (iNewStart > oSettings.fnRecordsDisplay()) { + oSettings._iDisplayStart = (Math.ceil((oSettings.fnRecordsDisplay() - 1) / oSettings._iDisplayLength) - 1) * oSettings._iDisplayLength; + fnCallbackDraw(oSettings); + return; + } + oSettings._iDisplayStart = iNewStart; + fnCallbackDraw(oSettings); + }); + + $('span', nPaging).bind('mousedown', function () { + return false; + }); + $('span', nPaging).bind('selectstart', function () { + return false; + }); + + 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 ; + 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.fnPagingInfo(); + var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength); + var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1; + + var an = oSettings.aanFeatures.p; + + $(an).find('span.paginate_total').html(oPaging.iTotalPages); + $(an).find('.pageinate_input_box').val(oPaging.iPage+1); + + for (var i = 0, iLen = an.length; i < iLen; i++) { + var spans = an[i].getElementsByTagName('span'); + var inputs = an[i].getElementsByTagName('select'); + var elSel = inputs[0]; + if(elSel.options.length != iPages) { + elSel.options.length = 0; + for (var j = 0; j < iPages; j++) { + var oOption = document.createElement('option'); + oOption.text = j + 1; + oOption.value = j + 1; + try { + elSel.add(oOption, null); + } catch (ex) { + elSel.add(oOption); + } + } + spans[2].innerHTML = " out of " + iPages; + } + elSel.value = iCurrentPage; + } + + $(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"); + } + }); + } + +};