/** * @Created By: Ademola Aina * @Email: debascoguy@gmail.com * @Year : 2018 Production * * DOCUMENTATION: * ============== * www.noahsarkeducation.com/code-lab/js/flexible-pagination * * LICENSE: * ======== * * TERMS OF USE - Flexible Pagination * * Open source under the BSD License. * * Copyright © 2018 Ademola Aina * All rights reserved. * * Redistribution and use in source and binary forms, with or without modification, * are permitted provided that the following conditions are met: * * Redistributions of source code must retain the above copyright notice, this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. */ var Flexible = (typeof Flexible === 'undefined') ? {} : Flexible; Flexible.Pagination = function(options){ var pager = this, defaultOption = {}; defaultOption.pagingControlsContainer = "#pagingControls"; defaultOption.pagingContainer = "#content"; defaultOption.itemSelector = ".item:visible"; //A Filtered Visible Paragraphs defaultOption.itemsPerPageSelector = ".itemPerPageDropDown"; //Paragraphs Per Page defaultOption.itemsPerPage = 1; defaultOption.currentPage = 1; defaultOption.searchBoxSelector = '.searchBox'; defaultOption.searchPhrase = ''; defaultOption.showingInfoSelector = '.showingInfo'; /** How many Page Number should be visible while navigating. Minimum allowed is 3 (previous, current & next) */ defaultOption.displayedPages = 10; /**Show / Hide Control Buttons : Default to TRUE */ defaultOption.showGotoFirst = true; defaultOption.showGotoLast = true; defaultOption.showPrevious = true; defaultOption.showNext = true; /** all Text can accept an icon using a OR tag. */ defaultOption.btnFirstText = "<<"; defaultOption.btnLastText = ">>"; defaultOption.btnNextText = ">"; defaultOption.btnPreviousText = "<"; /**CSS properties */ defaultOption.css = {}; defaultOption.css.paginationLayout = ""; defaultOption.css.btnNumberingClass = "btn btn-sm btn-primary"; defaultOption.css.btnActiveClass = "btn btn-sm btn-default"; defaultOption.css.btnFirstClass = defaultOption.css.btnNumberingClass; defaultOption.css.btnLastClass = defaultOption.css.btnNumberingClass; defaultOption.css.btnNextClass = defaultOption.css.btnNumberingClass; defaultOption.css.btnPreviousClass = defaultOption.css.btnNumberingClass; /**@Advanced Implementation default using a custom Json Data Source */ defaultOption.dataSource = {}; /**@Using_Ajax as DataSource */ defaultOption.ajax = {}; defaultOption.ajax.params = {}; defaultOption.ajax.url = ''; defaultOption.ajax.onSuccessCallBack = function(response){ console.log(response); return response; }; defaultOption.ajax.onFailureCallBack = function(error){ alert("Ajax Error - See Console for details!"); console.log(error); }; defaultOption.searchBox = {}; defaultOption.searchBox.onClick = false; defaultOption.searchBox.onClickSelector = ''; if (typeof options === 'undefined') { options = defaultOption; } var getOption = function(field){ return (typeof options[field] === 'undefined') ? defaultOption[field] : options[field]; }; var getAjaxOption = function(ajaxFieldName){ var value = getOption('ajax'), defaultValue = defaultOption['ajax']; return (typeof value[ajaxFieldName] === 'undefined') ? defaultValue[ajaxFieldName] : value[ajaxFieldName]; }; var getCssOption = function(cssFieldName){ var value = getOption('css'), defaultValue = defaultOption['css']; return (typeof value[cssFieldName] === 'undefined') ? defaultValue[cssFieldName] : value[cssFieldName]; }; var getSearchBoxOption = function(searchFieldName){ var value = getOption('searchBox'), defaultValue = defaultOption['searchBox']; return (typeof value[searchFieldName] === 'undefined') ? defaultValue[searchFieldName] : value[searchFieldName]; }; this.itemsPerPageSelector = getOption('itemsPerPageSelector'); this.itemsPerPage = getOption('itemsPerPage'); this.currentPage = getOption('currentPage'); this.pagingControlsContainer = getOption('pagingControlsContainer'); this.pagingContainer = getOption('pagingContainer'); this.itemSelector = getOption('itemSelector'); this.showingInfoSelector = getOption('showingInfoSelector'); this.displayedPages = getOption('displayedPages'); this.numOfPages = 0; this.searchBoxSelector = getOption('searchBoxSelector'); this.searchPhrase = getOption('searchPhrase'); this.showGotoFirst = getOption('showGotoFirst'); this.showGotoLast = getOption('showGotoLast'); this.showPrevious = getOption('showPrevious'); this.showNext = getOption('showNext'); this.btnFirstText = getOption('btnFirstText'); this.btnLastText = getOption('btnLastText'); this.btnPreviousText = getOption('btnPreviousText'); this.btnNextText = getOption('btnNextText'); this.dataSource = getOption('dataSource'); this.ajax = getOption('ajax'); this.ajax.params = getAjaxOption('params'); this.ajax.url = getAjaxOption('url'); this.ajax.onSuccessCallBack = getAjaxOption("onSuccessCallBack"); this.ajax.onFailureCallBack = getAjaxOption("onFailureCallBack"); this.css = getOption('css'); this.css.paginationLayout = getCssOption('paginationLayout'); this.css.btnNumberingClass = getCssOption('btnNumberingClass'); this.css.btnActiveClass = getCssOption('btnActiveClass'); this.css.btnFirstClass = getCssOption('btnFirstClass'); this.css.btnLastClass = getCssOption('btnLastClass'); this.css.btnNextClass = getCssOption('btnNextClass'); this.css.btnPreviousClass = getCssOption('btnPreviousClass'); this.css.paginationLayout = ""; this.searchBox = getOption('searchBox'); this.searchBox.onClick = getSearchBoxOption('onClick'); this.searchBox.onClickSelector = getSearchBoxOption('onClickSelector'); /**Private Property Below */ this.instanceId = Math.floor(Math.random() * 20); this.controller = null; this.init = function () { this.pagingContainer = $(this.pagingContainer); this.itemSelector = $(this.itemSelector, this.pagingContainer); if (this.displayedPages < 3){ console.log("Minimum Displayed Page Numbers Allowed While Navigating is 3. " + "\nTo avoid pagination control malfunction, please set this to >= 3, even if you have lesser items to display."); this.displayedPages = 3; } }; this.getController = function(){ if (this.controller == null) { this.init(); this.controller = new Flexible.PaginationController(this); } return this.controller; }; /** * @search * @param trString * @param words * @returns {boolean} */ this.search = function(trString, words){ for (var i = 0; i < words.length; i++) { if (trString.indexOf(words[i]) > -1) { return true; } } return false; }; /** * @getRowData * @returns {*} */ this.getData = function(){ var words = pager.searchPhrase.toLowerCase().split(" "), dataSource = pager.itemSelector; if (pager.dataSource.length > 0){ /**@Advanced Implementation Using a Custom Json Data Source */ dataSource = pager.dataSource; } if (pager.searchPhrase.length > 0){ /**@Filter By Search Phrase */ return dataSource.filter(function(key, value){ return pager.search($(value).html().replace(/<[^>]+>/g,"").toLowerCase(), words); }); } /**@NoFilter */ return dataSource; }; this.showingInfoHandler = function(start, end, totalItems){ if ($(pager.showingInfoSelector)[0]){ $(pager.showingInfoSelector).html("Showing "+(totalItems > 0 ? start+1 : 0)+' to '+ (end > totalItems ? totalItems : end)+' of '+totalItems+' Entries' ); } }; /** * @showCurrentPage */ this.showCurrentPage = function(){ if (pager.controller == null) { pager.init(); } var html = '', start = 0, end = 'all', totalItems = 0; if (pager.itemsPerPage != 'all'){ start = (pager.currentPage-1) * this.itemsPerPage; end = start+pager.itemsPerPage; } if (this.ajax.url != '' && this.ajax.url!='undefined'){ totalItems = end-start; /**@Ajax Implementation */ var request_params = {status:true, search: pager.searchPhrase, currentPage:pager.currentPage, start:start, end:end, totalItems:totalItems}; pager.ajax.params = $.extend(this.ajax.params, request_params); $.post(pager.ajax.url, pager.ajax.params, function(response){ html = pager.ajax.onSuccessCallBack(response); if (pager.itemsPerPage == 'all'){ pager.itemsPerPage = response.totalItems; } totalItems = response.totalItems; start = (pager.currentPage-1) * pager.itemsPerPage; end = start+pager.itemsPerPage; pager.pagingContainer.html(html); pager.showingInfoHandler(start, end, totalItems); }, 'json').fail(pager.ajax.onFailureCallBack); } else{ /**@Basic_OR_Advanced Implementation */ var data = pager.getData(); totalItems = data.length; if (pager.itemsPerPage=='all'){ pager.itemsPerPage = totalItems; start = (pager.currentPage-1) * this.itemsPerPage; end = start+pager.itemsPerPage; } data.slice(start, end).each(function(){ html += this.outerHTML; }); pager.pagingContainer.html(html); pager.showingInfoHandler(start, end, totalItems); } $(pager.pagingControlsContainer).html(''); pager.numOfPages = 0; if (totalItems > pager.itemsPerPage){ /** Auto-Calculate the number of Pages. */ pager.numOfPages = Math.ceil(totalItems / pager.itemsPerPage); /**@render Pagination Controls */ pager.renderControls(); } }; var createButton = function (Label, btnClasses, isDisabled) { return '
  • '+Label+'
  • '; }; /** * @renderControls */ this.renderControls = function () { var container = this.pagingControlsContainer, currentPage = this.currentPage, numPages = this.numOfPages, displayedPages = this.displayedPages; //How many Page Number should be visible while navigating var pagingControls = this.css.paginationLayout + "'; $(container).html(pagingControls); if (this.controller == null){ this.controller = new Flexible.PaginationController(this); } }; }; /** * @Flexible.PaginationController * @param pager * @constructor */ Flexible.PaginationController = function(pager){ var body = $('body'), controller = this, instanceId = pager.instanceId; /** * @showPage * @param page */ controller.showPage = function(page){ pager.currentPage = page; pager.showCurrentPage(); return pager.currentPage; }; /** * @returns {number} */ controller.showFirstPage = function() { return controller.showPage(1); }; /** * @returns {number|*} */ controller.showLastPage = function() { return controller.showPage(pager.numOfPages); }; /** * @returns {number|*} */ controller.showPreviousPage = function(){ return controller.showPage(parseInt(body.find('.se-active-page'+instanceId).html())-1); }; /** * @returns {number|*} */ controller.showNextPage = function(){ return controller.showPage(parseInt(body.find('.se-active-page'+instanceId).html())+1); }; /** * @onPageClick * @param pageNumber Optional Parameter * @param event Optional Parameter * @returns {boolean} */ controller.onPageClick = function (pageNumber, event) { return true; }; if (pager.searchBox.onClick){ body.on("click", pager.searchBox.onClickSelector, function(e){ pager.searchPhrase = $(pager.searchBoxSelector).val(); controller.showFirstPage(); }); } else { /**@search Text field control */ body.on("keyup", pager.searchBoxSelector, function(e){ pager.searchPhrase = $(this).val(); controller.showFirstPage(); }); } /**@dropDown for selecting Items Per Page */ body.on("change", pager.itemsPerPageSelector, function(e){ e.preventDefault(); pager.itemsPerPage = ($(this).val()=='all') ? $(this).val() : parseInt($(this).val()); controller.showFirstPage(); }); /**@onClick Page Number */ body.on('click', '.se-page-num'+instanceId, function (e) { e.preventDefault(); var pageNum = parseInt($(this).html()); controller.showPage(pageNum); controller.onPageClick(pageNum, e); }); /**@onClick Previous Button */ body.on('click', '.se-prev'+instanceId, function (e) { e.preventDefault(); var pageNum = controller.showPreviousPage(); controller.onPageClick(pageNum, e); }); /**@onClick Next Button */ body.on('click', '.se-next'+instanceId, function (e) { e.preventDefault(); var pageNum = controller.showNextPage(); controller.onPageClick(pageNum, e); }); /**@onClick First Button */ body.on('click', '.se-first'+instanceId, function (e) { e.preventDefault(); var pageNum = controller.showFirstPage(); controller.onPageClick(pageNum, e); }); /**@onClick Last Button */ body.on('click', '.se-last'+instanceId, function (e) { e.preventDefault(); var pageNum = controller.showLastPage(); controller.onPageClick(pageNum, e); }); }; (function($) { $.fn.flexiblePagination = function (newOptions) { return $.flexiblePagination(this, newOptions); }; $.flexiblePagination = function (pagingContainer, newOptions) { newOptions['pagingContainer'] = pagingContainer; var pager = new Flexible.Pagination(newOptions); pager.showCurrentPage(); return pager; }; })(jQuery);