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 相关文章推荐
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jQuery实现穿梭框效果
Jan 19 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代码
2010/02/16 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
详解用python实现简单的遗传算法
2018/01/02 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
毕业生工作求职信
2014/06/30 职场文书
铁人观后感
2015/06/16 职场文书
2016元旦主持人开场白
2015/12/03 职场文书