JqueryPagination是个简单轻量级的分页插件，使用起来很容易，只要初始化一个实例，并设置总数量、翻页回调函数、其它参数就可以实现无刷新分页功能了。
准备工作
下载jquery.min.js
下载jquery.pagination.js
下载pagination.css
开始敲代码
第一步，引入刚刚下载的三个文件
|
1 2 3 |
<link rel="stylesheet" href="lib/pagination.css" /> <script type="text/javascript" src="lib/jquery.min.js"></script> <script type="text/javascript" src="lib/jquery.pagination.js"></script> |
第二步，在页面结构写一个有id属性以及class="pagination"的div
|
1 |
<div id="Pagination" class="pagination"></div> |
第三步，初始化
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(function() { $("#Pagination").pagination(25, { num_edge_entries: 0, num_display_entries: 5, current_page: 1, callback: function (page) { console.log(page); }, items_per_page:10, prev_text: '上一页', next_text: '下一页', prev_show_always: true, next_show_always: true }); }) |
或者：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
$(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) { //后台服务返回数据，重新加载数据 } }); } |
完成。
使用方法
跟一般的jQuery插件一样，此插件使用也很简单便捷。方法是pagination，例如$("#page").pagination(100);
参数
| 参数名 | 描述 | 参数值 |
|---|---|---|
| maxentries | 总条目数 | 必选参数，整数 |
| items_per_page | 每页显示的条目数 | 可选参数，默认是10 |
| num_display_entries | 连续分页主体部分显示的分页条目数 | 可选参数，默认是10 |
| current_page | 当前选中的页面 | 可选参数，默认是0，表示第1页 |
| num_edge_entries | 两侧显示的首尾分页的条目数 | 可选参数，默认是0 |
| link_to | 分页的链接 | 字符串，可选参数，默认是"#" |
| prev_text | “前一页”分页按钮上显示的文字 | 字符串参数，可选，默认是"Prev" |
| next_text | “下一页”分页按钮上显示的文字 | 字符串参数，可选，默认是"Next" |
| ellipse_text | 省略的页数用什么文字表示 | 可选字符串参数，默认是"…" |
| prev_show_always | 是否显示“前一页”分页按钮 | 布尔型，可选参数，默认为true，即显示“前一页”按钮 |
| next_show_always | 是否显示“下一页”分页按钮 | 布尔型，可选参数，默认为true，即显示“下一页”按钮 |
| callback | 回调函数 | 默认无执行效果 |