简单易用的分页插件

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

在页面上插入

<nav aria-label="Page navigation">
    <ul class="pagination">
    </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="#" onclick="$.fn.prePage(\'' + formId + '\',' + settings.pageNum + ',' + settings.pageSize + ',' + pages + ')">&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 class="active"><a href="#" onclick="$.fn.searchData(\'' + formId + '\',' + i + ',' + settings.pageSize + ')">' + i + '</a></li>'
 74                     );
 75                 }else{
 76                     $(this).append(
 77                             '<li><a href="#" onclick="$.fn.searchData(\'' + formId + '\',' + i + ',' + settings.pageSize + ')">' + i + '</a></li>'
 78                     );
 79                 }
 80                 
 81             }
 82             $(this).append(
 83                     ' <li><a href="#" onclick="$.fn.nextPage(\'' + formId + '\',' + settings.pageNum + ',' + settings.pageSize + ',' + pages + ')">&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));

 

posted @ 2018-02-01 15:15  zhanyd  阅读(240)  评论(0)  编辑  收藏  举报