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 相关文章推荐
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
javascript cookies操作集合
Apr 12 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
Vue实现穿梭框效果
Sep 30 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
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现探测socket和web服务示例
2014/03/28 Python
python的re模块应用实例
2014/09/26 Python
Python实现简单的代理服务器
2015/07/25 Python
python基础练习之几个简单的游戏
2017/11/10 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
新员工入职感言
2014/02/01 职场文书
个人查摆剖析材料
2014/02/04 职场文书
策划创业计划书
2014/02/06 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
企业党员个人自我评价
2014/09/20 职场文书
python基础详解之if循环语句
2021/04/24 Python
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
zabbix配置nginx监控的实现
2022/05/25 Servers