简单易用的分页插件

该分页插件使用简单，体积小，配合bootstrap使用，请先引入bootstrap。
使用方法如下：  

在页面上插入

<nav aria-label="Page navigation">
    <ul>
    </ul>
</nav>

调用方法

$(".pagination").initPagination('formId',20,{
    pageNum: 1,
    pageSize: 10
});

参数说明

initPagination(formId,pages,option)  

formId：表单id

pages：总页数

pageNum：当前页数

pageSize：每页数量

效果如下：

 

 

代码如下：

1 /** 2 * 分页插件 3 * @author zhanyd@sina.com 4 * @date 2018/02/01 5 * @version 1.0 6 */ 7 (function($){ 8 $.fn.extend({ 9 //初始化 10 initPagination : function(formId,pages,option){ 11 12 var defaults = { 13 pageNum: 1, //起始页 14 pageSize: 10, //每页数 15 leftPageNum: 3, //左边页数 16 middleNum: 10, //中间页数 17 rightPageNum : 3 //右边页数 18 }; 19 var settings = $.extend(defaults, option); 20 21 $(this).empty(); 22 $(this).append( 23 ' <li><a href="#">&laquo;</a></li>' 24 ); 25 26 //初始化页数 27 for(var i = 1; i <= pages; i++){ 28 //当前页是第一页时 29 if(settings.pageNum == 1){ 30 //settings.leftPageNum + 1处后面加... 31 if(i == (settings.leftPageNum + 1) && settings.leftPageNum + settings.rightPageNum <= pages){ 32 $(this).append('<li><a href="#">...</a></li>'); 33 34 //...一直加到最后一页往前推settings.rightPageNum页 35 i = pages - settings.rightPageNum; 36 continue; 37 } 38 } 39 //当前页小于中间页数时 40 else if(settings.pageNum < settings.middleNum){ 41 //settings.middleNum + 1处后面加... 42 if(i == (settings.middleNum + 1) && settings.middleNum + settings.rightPageNum <= pages){ 43 $(this).append('<li><a href="#">...</a></li>'); 44 45 //...一直加到最后一页往前推settings.rightPageNum页 46 i = pages - settings.rightPageNum; 47 continue; 48 } 49 } 50 else{ 51 //settings.leftPageNum + 1处后面加... 52 if(i == (settings.leftPageNum + 1) && settings.leftPageNum + settings.rightPageNum <= pages){ 53 $(this).append('<li><a href="#">...</a></li>'); 54 55 //...一直加到当前页前面settings.middleNum/2处 56 i = settings.pageNum - settings.middleNum/2; 57 continue; 58 } 59 60 //当前页后面settings.middleNum/2处加... 61 if(i == (settings.pageNum + settings.middleNum/2) && (settings.pageNum + settings.middleNum/2 + settings.rightPageNum) <= pages){ 62 $(this).append('<li><a href="#">...</a></li>'); 63 64 //...一直加到最后一页往前推settings.rightPageNum页 65 i = pages - settings.rightPageNum; 66 continue; 67 } 68 } 69 70 //当前页高亮 71 if(i == settings.pageNum){ 72 $(this).append( 73 '<li><a href="#">' + i + '</a></li>' 74 ); 75 }else{ 76 $(this).append( 77 '<li><a href="#">' + i + '</a></li>' 78 ); 79 } 80 81 } 82 $(this).append( 83 ' <li><a href="#">&raquo;</a></li>' 84 ); 85 86 87 }, 88 //上一页 89 prePage : function(formId,pageNum,pageSize,pages){ 90 if(pageNum == 1){ 91 pageNum = pages; 92 }else{ 93 pageNum--; 94 } 95 $.fn.searchData(formId,pageNum,pageSize); 96 }, 97 98 //下一页 99 nextPage : function(formId,pageNum,pageSize,pages){ 100 if(pageNum == pages){ 101 pageNum = 1; 102 }else{ 103 pageNum++; 104 } 105 $.fn.searchData(formId,pageNum,pageSize); 106 }, 107 108 //提交表单 109 searchData : function(formId,pageNum,pageSize){ 110 $("#pageNum").val(pageNum); 111 $("#pageSize").val(pageSize); 112 $("#" + formId).submit(); 113 } 114 }); 115 }(jQuery));