jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版


Posted in Javascript onJanuary 11, 2013

原项目地址:http://plugins.jquery.com/project/pagination
版本:v1.2
源文件下载:英文原版 或中文翻译修改版

一、相关demo

  • 基本demo页面
  • Ajax demo页面
  • 参数可编辑demo页面
二、简介与说明
  • 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。
  • 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持text-align的定位。
  • 对原js文件注释进行了中文翻译,demo页面也是汉化了的,demo页面的js与原demo有一些出入,但核心不变。
三、使用方法

跟一般的jQuery插件一样,此插件使用也很简单便捷。方法是pagination,例如$("#page").pagination(100);,这里的100参数是必须的,表示显示项目的总个数,这是最简单的使用,得到的显示如下:
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

还有一点值得一提的是分页列表需要放在class类为pagination的标签内,您可以使用text-align属性控制分页居中显示还是居右显示。

回调函数一般用来装载对应分页显示的内容,具体参见demo源文件。

四、参数
参数名 描述 参数值
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)。您可以对照参数表修改配置这里的参数。六、关于demo的一些说明

总共有三个demo,第一个demo就是个静态的数据,直接写在HTML上;第二个使用Ajax加载HTML数据,然后进行分页显示;第三个demo可以动态修改一些参数观察对应的分页效果。

所有demo页面的js注释我都改为了中文标注,难点在于回调函数,demo中回调函数有两个参数,一个是page_index,另一个是jq,前一个表示您当前点击的那个分页的页数索引值,后一个参数表示装载容器。这里的页数索引值是关键,我们要根据这个索引值找到对应的(例如)HTML元素,然后再指定的容器中显示出来,demo中提供了装载单元素以及多元素的方法,相信不会有太大问题。
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

好吧,就这些!

如果您发现文章中有表述不准确或是有相关问题需要交流可以通过评论或是去这里进行提问交流。
(本篇完)

Javascript 相关文章推荐
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
xml转json的js代码
Aug 28 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
js实现多图左右切换功能
Aug 04 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 #Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 #Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 #Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 #Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 #Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 #Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 #Javascript
You might like
PHP下几种删除目录的方法总结
2007/08/19 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
Django中的Signal代码详解
2018/02/05 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
Python解析json代码实例解析
2019/11/25 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
数据库方面面试题
2012/04/22 面试题
自我评价怎么写正确呢?
2013/12/02 职场文书
办公室文员工作职责
2014/01/31 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
升职自我推荐信范文
2015/03/25 职场文书
个人收入证明格式
2015/06/24 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
在Python 中将类对象序列化为JSON
2022/04/06 Python
Django框架之路由用法
2022/06/10 Python
mysql全面解析json/数组
2022/07/07 MySQL