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

准备工作

下载jquery.min.js
下载jquery.pagination.js
下载pagination.css

开始敲代码

第一步,引入刚刚下载的三个文件

<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

<div id="Pagination" class="pagination"></div>

第三步,初始化

    $(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
});
})

或者:

$(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 回调函数 默认无执行效果

最新文章

  1. iOS 视图:重绘与UIScrollView(内容根据iOS编程编写)
  2. 一种可以避免数据迁移的分库分表scale-out扩容方式
  3. 20+功能强大的jQuery/CSS3图片特效插件
  4. makefile_2
  5. 原子操作 Interlocked系列函数
  6. C++程序员的javascript教程
  7. CSDN总结的面试中的十大可视化工具
  8. 对开发中常见的内存泄露,GDI泄露进行检测
  9. 基于IMX515EVK+WINCE6.0---支持PB6.0通过USB下载镜像文件
  10. 【问题】VS问题集合,不用也要收藏防止以后使用找不到
  11. windows 自动贴边
  12. web性能监控与分析
  13. try....fail....catch...Assert 模式的测试, fail是Junit中的功能
  14. Nodejs--url模块
  15. [转]HBASE 二级索引
  16. 关于github的使用心得
  17. level3
  18. JAVA是否可以作脚本语言呢
  19. SQL Server中如何实现遍历表的记录
  20. msdn 中MethodBase.Invoke 方法 介绍中的坑

热门文章

  1. thymeleaf手动映射根路径映射
  2. Repository HDU - 2846 字典树
  3. 51Nod1824 染色游戏 【Lucas定理】【FMT】【位运算】
  4. 洛谷P3870开关题解
  5. Pleasant sheep and big big wolf HDU - 3046(最小割)
  6. MySQL免安装版,遇到MSVCR120.dll文件丢失错误的解决方案
  7. Django的Hello World
  8. Linux 多网卡绑定bond
  9. 如何减少UI设计师产品与前端工程师的沟通成本
  10. unittest单元测试框架中的参数化及每个用例的注释