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 相关文章推荐
事件模型在各浏览器中存在差异
Oct 20 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 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
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
巧用canvas
2017/01/21 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
python写入并获取剪切板内容的实例
2018/05/31 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Python中Unittest框架的具体使用
2019/08/27 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
猫咪家具:CatsPlay
2018/11/03 全球购物
大学中国梦演讲稿
2014/04/23 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
应聘教师自荐书
2014/06/16 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python