jQuery Pagination分页插件_动力节点Java学院整理


Posted in jQuery onJuly 17, 2017

插件简介

此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。

原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持text-align的定位。

使用方法

跟一般的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 回调函数 默认无执行效果

举例

例如下面的使用代码:

$("#Pagination").pagination(56, {
  num_edge_entries: 2,
  num_display_entries: 4,
  callback: pageselectCallback,
  items_per_page:1
});

这段代码表示的含义是:总共有56(maxentries)个列表项,首尾两侧分页显示2(num_edge_entries)个,连续分页主体数目显示4(num_display_entries)个,回调函数为pageselectCallback(callback),每页显示的列表项为1(items_per_page)个。

jQuery 相关文章推荐
基于jquery实现二级联动效果
Mar 30 jQuery
jQuery操作之效果详解
May 19 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
jQuery实现tab栏切换效果
Dec 22 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 #jQuery
jQuery列表检索功能实现代码
Jul 17 #jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 #jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 #jQuery
JQuery EasyUI的一些常用组件
Jul 12 #jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 #jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 #jQuery
You might like
php从给定url获取文件扩展名的方法
2015/03/14 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
js 替换
2008/02/19 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
python 美化输出信息的实例
2018/10/15 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
django 模型中的计算字段实例
2020/05/19 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
C#面试题问题集
2016/04/02 面试题
某公司面试题
2012/03/05 面试题
合同专员岗位职责
2013/12/18 职场文书
应届毕业生求职自荐书
2014/01/03 职场文书
单位授权委托书范本
2014/09/26 职场文书
工作经历证明书范文
2014/11/02 职场文书
人事聘任通知
2015/04/21 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
首都博物馆观后感
2015/06/05 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js