jquery.pagination.js分页插件使用说明

冷不防 2021-06-26 16:06 615阅读 0赞

`jquery.pagination.js`是个简单轻量级的分页插件，使用起来很容易，只要初始化一个实例，并设置总数量、翻页回调函数、其它参数就可以实现无刷新分页功能了

## 1 首先引入相关`js`文件： ##

## 2 编写`html`代码，在页面添加一个`div` ##

## 3 添加`javascript` 代码，实例化分页插件 ##

$(function () { 
    　　　　var pageCount=50;  //分页总数量
          // $("#pagination").pagination(pageCount); //简单初始化方法
          
            $("#pagination").pagination(pageCount,    //分布总数量，必须参数
                     { 
    
    　　　　　　　　　　callback: PageCallback,  //PageCallback() 为翻页调用次函数。
                      prev_text: "« 上一页",
                      next_text: "下一页 »",
                      items_per_page:10,
                      num_edge_entries: 2,       //两侧首尾分页条目数
                      num_display_entries: 10,    //连续分页主体部分分页条目数
                      current_page: 0,   //当前页索引
    　　　　　　　　　　link_to: "?id=__id__"  //分页的js中会自动把"__id__"替换为当前的数。0　
    　　　 });
     });
    
    function PageCallback(page_index,jq)
    { 
         $.ajax({    
                    type: "POST",  
                    dataType: "text",  
                    url: '后台处理地址',      //提交到一般处理程序请求数据 
                    data: "pageIndex=" + (pageIndex) + "&pageSize=" + pageSize,          //提交两个参数：pageIndex(页面索引)，pageSize(显示条数) 
                    success: function(data) { 
                               //后台服务返回数据，重新加载数据
                            }  
               }); 
    }

## 4 插件`pagination()`方法参数 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">参数名</th> 
   <th align="left">描述</th> 
   <th align="left">参数值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">maxentries</td> 
   <td align="left">总条目数</td> 
   <td align="left">必选参数，整数</td> 
  </tr> 
  <tr> 
   <td align="left">items_per_page</td> 
   <td align="left">每页显示的条目数</td> 
   <td align="left">可选参数，默认是10</td> 
  </tr> 
  <tr> 
   <td align="left">num_display_entries</td> 
   <td align="left">连续分页主体部分显示的分页条目数</td> 
   <td align="left">可选参数，默认是10</td> 
  </tr> 
  <tr> 
   <td align="left">current_page</td> 
   <td align="left">当前选中的页面</td> 
   <td align="left">可选参数，默认是0，表示第1页</td> 
  </tr> 
  <tr> 
   <td align="left">num_edge_entries</td> 
   <td align="left">两侧显示的首尾分页的条目数</td> 
   <td align="left">可选参数，默认是0</td> 
  </tr> 
  <tr> 
   <td align="left">link_to</td> 
   <td align="left">分页的链接</td> 
   <td align="left">字符串，可选参数，默认是"#"</td> 
  </tr> 
  <tr> 
   <td align="left">prev_text</td> 
   <td align="left">“前一页”分页按钮上显示的文字</td> 
   <td align="left">字符串参数，可选，默认是"Prev"</td> 
  </tr> 
  <tr> 
   <td align="left">next_text</td> 
   <td align="left">“下一页”分页按钮上显示的文字</td> 
   <td align="left">字符串参数，可选，默认是"Next"</td> 
  </tr> 
  <tr> 
   <td align="left">ellipse_text</td> 
   <td align="left">省略的页数用什么文字表示</td> 
   <td align="left">可选字符串参数，默认是"…"</td> 
  </tr> 
  <tr> 
   <td align="left">prev_show_always</td> 
   <td align="left">是否显示“前一页”分页按钮</td> 
   <td align="left">布尔型，可选参数，默认为true，即显示“前一页”按钮</td> 
  </tr> 
  <tr> 
   <td align="left">next_show_always</td> 
   <td align="left">是否显示“下一页”分页按钮</td> 
   <td align="left">布尔型，可选参数，默认为true，即显示“下一页”按钮</td> 
  </tr> 
  <tr> 
   <td align="left">callback</td> 
   <td align="left">回调函数</td> 
   <td align="left">当点击链接的时候此函数被调用，此函数接受两个参数，新一页的id和pagination容器（一个DOM元素）。如果回调函数返回false，则pagination事件停止执行</td> 
  </tr> 
  <tr> 
   <td align="left">load_first_page</td> 
   <td align="left">初始化时是否执行回调函数</td> 
   <td align="left">如果为true则当插件初始化时回调函数被执行。如果你通过ajax来显示内容，那么在初始化分页插件时应把它设置为false;默认值: true</td> 
  </tr> 
 </tbody> 
</table>

## 5 插件其它方法 ##

// 自定义事件触发分页
    
        // 跳到第3页 
        $("#pagination").trigger('setPage', [2]);
        // 下一页
        $("#pagination").trigger('nextPage');
        // 上一页
        $("#pagination").trigger('prevPage');

后台代码就贴出来了，一般是返回`json`格式的数据到前面处理。

总结：JqueryPagination使用简单，只需要设置参数和回调函数就可以用，通过回调函数处理 翻页触发的事件，比较灵活。