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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
JavaScript去掉数组中的重复元素
Jan 13 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
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
咖啡与牛奶
2021/03/03 冲泡冲煮
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
Python编写检测数据库SA用户的方法
2014/07/11 Python
实用自动化运维Python脚本分享
2018/06/04 Python
用Python逐行分析文件方法
2019/01/28 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
python实现简单遗传算法
2020/09/18 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
后勤人员自我评价怎么写
2013/09/19 职场文书
销售顾问岗位职责
2014/02/25 职场文书
法学院毕业生求职信
2014/06/25 职场文书
农村老人去世追悼词
2015/06/23 职场文书
保护环境的宣传语
2015/07/13 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js