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 相关文章推荐
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
js使用eval解析json实例与注意事项分享
Jan 18 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
javascript 实现map集合
Apr 03 Javascript
js实现微信分享代码
Oct 11 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
JS访问对象两种方式区别解析
Aug 29 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 冲泡冲煮
人大复印资料处理程序_查询篇
2006/10/09 PHP
基于mysql的论坛(4)
2006/10/09 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
Javascript 入门基础学习
2010/03/10 Javascript
jquery的Theme和Theme Switcher使用小结
2010/09/08 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
Python logging设置和logger解析
2019/08/28 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
联谊活动策划书
2014/01/26 职场文书
面试必备的求职信
2014/05/25 职场文书
十周年庆典策划方案
2014/06/03 职场文书
大学生团员个人总结
2015/02/14 职场文书
同意报考证明
2015/06/17 职场文书
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL