├── .gitignore ├── pagination.min.js ├── README.md ├── test ├── index.html ├── example-1.html ├── example-2.html ├── example-3.html ├── example.process.php └── data.json └── pagination.js /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | index.php 3 | -------------------------------------------------------------------------------- /pagination.min.js: -------------------------------------------------------------------------------- 1 | !function($){"use strict";var bsVersion=3;void 0!==$.fn.tooltip&&(bsVersion=$.fn.tooltip.Constructor.VERSION.split(".")[0]);var rpmListClass="page-num",rpmAnchorClass="",rpmHideClass="hide";function refreshPageforItems(obj,current,limit,url,form){let offset=0,ap;if(obj.parent().hasClass("prev"))offset=limit*(current-2);else if(obj.parent().hasClass("next"))offset=limit*current;else{let cl=obj.data("page_no");offset=limit*((current=parseInt(cl))-1)}null===form||""===form||$(form).length<=0?(ap="?",url.includes("?")&&(ap="&"),window.location.href=url+ap+"limit="+limit+"&offset="+offset):form=$(form),form.append($("").attr("type","hidden").attr("name","limit").attr("value",limit)),form.append($("").attr("type","hidden").attr("name","offset").attr("value",offset)).submit()}$.fn.rpmPagination=function(options){var settings=$.extend({limit:10,total:0,currentPage:1,domElement:".p-item",refresh:!1,link:null,formElement:null},options);let $this=$(this),pages=1,rpmPageNext=settings.limit,rpmPageTotal=settings.total,tBool=!1,rpmPageDomElem=settings.domElement,rpmCustomDomElem="p-"+Math.random().toString(36).substr(2,6),version;return 4==bsVersion[0]&&(rpmListClass="page-item "+rpmListClass,rpmHideClass="d-none",rpmAnchorClass="page-link"),rpmPageTotal<=0&&(tBool=!0),$(rpmPageDomElem).each((function(i,obj){tBool&&(rpmPageTotal=i+1),$(obj).addClass(rpmCustomDomElem),$(obj).addClass(rpmCustomDomElem+"-"+parseInt(i+1))})),rpmPageTotal>settings.limit&&(pages=parseInt(rpmPageTotal/settings.limit),rpmPageTotal%settings.limit>0&&(pages+=1)),preparePageMenus(settings.currentPage,pages,$this),[settings.currentPage,rpmPageNext]=preparePageItems(settings.currentPage,rpmPageNext,settings.limit,rpmCustomDomElem,"page-num"),settings.refresh&&$("."+rpmCustomDomElem).length>0&&$("."+rpmCustomDomElem).removeClass(rpmHideClass),$(document).on("click",".page-num > a",(function(e){if(e.preventDefault(),$(this).parent().hasClass("disabled")||0===$(this).parent($this).length)return!1;if(!0===settings.refresh)refreshPageforItems($(this),settings.currentPage,settings.limit,settings.link,settings.formElement);else if($(this).parent().hasClass("prev"))[settings.currentPage,rpmPageNext]=preparePageItems(settings.currentPage,rpmPageNext,settings.limit,rpmCustomDomElem,"prev");else if($(this).parent().hasClass("next"))[settings.currentPage,rpmPageNext]=preparePageItems(settings.currentPage,rpmPageNext,settings.limit,rpmCustomDomElem,"next");else{let cl=$(this).data("page_no");settings.currentPage=parseInt(cl),[settings.currentPage,rpmPageNext]=preparePageItems(settings.currentPage,rpmPageNext,settings.limit,rpmCustomDomElem,"page-num")}preparePageMenus(settings.currentPage,pages,$this)})),!0};var preparePageItems=function(current_page,next,limit,element,type){$("."+element).addClass(rpmHideClass);var current=0;if("prev"===type){for(let i=current=(next-=limit)-limit+1;i<=next;i++)$("."+element+"-"+i).removeClass(rpmHideClass);current_page--}else if("next"===type){current=next+1,next+=limit;for(let i=current;i<=next;i++)$("."+element+"-"+i).removeClass(rpmHideClass);current_page++}else if("page-num"===type){next=limit*(current_page-1)+limit;for(let i=current=limit*(current_page-1)+1;i<=next;i++)$("."+element+"-"+i).removeClass(rpmHideClass)}return[current_page,next]},preparePageMenus=function(current_page,pages,element){$(element).html("");let pageArray=[],fp=1,lp=pages,menuHtml="";if(lp<=6)for(let i=1;i<=lp;i++)pageArray.push(i);else pageArray=Math.abs(current_page-1)<3?[1,2,3,4,"...",lp]:Math.abs(current_page-lp)<3?[1,"...",lp-3,lp-2,lp-1,lp]:[1,"...",current_page-1,current_page,current_page+1,"...",lp];menuHtml='
  • prev
    • ';for(let i=0;i...':menuHtml+='
  • '+pageArray[i]+"
    • ";return menuHtml+='
  • next
    • ',$(element).append(menuHtml),!0}}(jQuery); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Simple Pagination Plugin in jQuery / Bootstrap [ V2.1.1 ] 2 | 3 | ## Getting Started 4 | 5 | In various front-end application developers intend to paginate tabular data / data list in their own custom way. 6 | 7 | * sometimes, without page refresh for fast user interactivity 8 | * sometimes, in a regular pagination with page refresh by sending limit/offset query strings 9 | * sometimes, with searchable form parameters 10 | 11 | For such circumstances, my pagination plugin can be used easily. [see demo](https://projects.sabbirrupom.com/rpm-pagination/) 12 | 13 | ### Prerequisites 14 | 15 | Before you begin, you need following things to be loaded beforehand: 16 | 17 | * jQuery 2+ [ tested upto 3.4.1+ ] 18 | * Bootstrap CSS 3+ [ tested upto 4.3.1+ ] 19 | 20 | ## Usage 21 | 22 | Include the (minified) JavaScript Templates script in your HTML markup: 23 | 24 | ```html 25 | 26 | ``` 27 | 28 | Then initialize the plugin function with you pagination item as below: 29 | 30 | ```js 31 | $('[ pagination-menu-holder ]').rpmPagination({ domElement: '[ pagination-item ]' }); 32 | ``` 33 | 34 | Here, 35 | * [ pagination-menu-holder ] => any suitable html tag [ e.g `