http://www.zhangxinxu.com/wordpress/2010/01/jquery-pagination-ajax%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6%E4%B8%AD%E6%96%87%E8%AF%A6%E8%A7%A3/

个人博客参考

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

本文地址: http://www.zhangxinxu.com/wordpress/?p=616

本文作者为:张鑫旭 来源于:张鑫旭-鑫空间-鑫生活 欢迎访问原出处

一、相关demo

本文地址: http://www.zhangxinxu.com/wordpress/?p=616

本文作者为:张鑫旭 来源于:张鑫旭-鑫空间-鑫生活 欢迎访问原出处

二、简介与说明

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

本文地址: http://www.zhangxinxu.com/wordpress/?p=616

本文作者为:张鑫旭 来源于:张鑫旭-鑫空间-鑫生活 欢迎访问原出处

三、使用方法

跟一般的jQuery插件一样,此插件使用也很简单便捷。方法是pagination,例如$("#page").pagination(100);,这里的100参数是必须的,表示显示项目的总个数,这是最简单的使用,得到的显示如下:

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

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

本文地址: http://www.zhangxinxu.com/wordpress/?p=616

本文作者为:张鑫旭 来源于:张鑫旭-鑫空间-鑫生活 欢迎访问原出处

四、参数

参数名 描述 参数值
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 回调函数 默认无执行效果

本文地址: http://www.zhangxinxu.com/wordpress/?p=616

本文作者为:张鑫旭 来源于:张鑫旭-鑫空间-鑫生活 欢迎访问原出处

五、使用举例

例如下面的使用代码:

$("#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)。您可以对照参数表修改配置这里的参数。

本文地址: http://www.zhangxinxu.com/wordpress/?p=616

本文作者为:张鑫旭 来源于:张鑫旭-鑫空间-鑫生活 欢迎访问

六、关于demo的一些说明

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

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

好吧,就这些!

如果您发现文章中有表述不准确或是有相关问题需要交流可以通过评论或是去这里进行提问交流。 原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 本文地址:http://www.zhangxinxu.com/wordpress/?p=616

Pagination jquery ajax 分页参考资料的更多相关文章

  1. 转:精心挑选的12款优秀 jQuery Ajax 分页插件和教程

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的  ...

  2. 分享一个手机端好用的jquery ajax分页类

    分享一个手机端好用的jquery ajax分页类 jquery-ias.min.js 1,引入jquery-ias.min.js 2,调用ajax分页 <script type="te ...

  3. 12款优秀 jQuery Ajax 分页插件和教程

    12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...

  4. jquery ajax分页写法

    jquery ajax分页写法我用的是laypage插件 前端代码<pre> function demo(curr) { $.getJSON('/home/index/getinfo', ...

  5. 精心挑选的12款优秀 jQuery Ajax 分页插件和教程

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的  ...

  6. 12款优秀jQuery Ajax分页插件和教程

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...

  7. jQuery Pagination Plugin ajax分页控件

    <html> <body> <div id="datagrid"> </div> <div id="paginati ...

  8. jquery+ajax分页

    先看效果图:

  9. jQuery Ajax 分页插件

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容 很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载 ...

随机推荐

  1. 关于jdbc注冊驱动的那点事

    看到非常多人写jdbc连接工具类的时候,都会写到Class.forName()去显示载入类,一写错点点就会抛出ClassNotFoundException,关于显示载入类,究竟会不会产生作用呢? 參考 ...

  2. [Python]网络爬虫(十):一个爬虫的诞生全过程(以山东大学绩点运算为例)

    先来说一下我们学校的网站: http://jwxt.sdu.edu.cn:7777/zhxt_bks/zhxt_bks.html 查询成绩需要登录,然后显示各学科成绩,但是只显示成绩而没有绩点,也就是 ...

  3. Adaboost的几个人脸检测网站

    [1]基础学习笔记之opencv(1):opencv中facedetect例子浅析 http://www.cnblogs.com/tornadomeet/archive/2012/03/22/2411 ...

  4. TkinterGUI - 初识Tkinter

    前言 近期有写一个简单GUI程序的点子,具体写什么就不说了,但一个要求就是有跨平台的功能. 确切的讲,是我希望这个程序写好后能同时在Windows和Linux下运行,而且要方便随时修改. 对于编程语言 ...

  5. 自编Ps教程—我的ps图片赞赏

    上篇讲述了主要的ps概念和操作,这里不再讲述了,主要的操作学好了,其它的都简单,下面我会把我闲暇时间天马行空的小作品上穿,以供大家闲暇时间或者工作累了的时候赞赏! 以后还会在这里上传哦!喜欢就收藏吧! ...

  6. hdu2612(bfs)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2612 题意:求2个点到任意一个KFC的距离之和,使其最小. 分析:由两个点出发分别两次bfs,求得到每 ...

  7. Ubuntu 32下Android NDK+NEON的配置过程及简单使用举例

    1.  利用VMware在Windows7 64位下安装Ubuntu13.10 32位虚拟机: 2.  从 https://developer.android.com/tools/sdk/ndk/in ...

  8. Spring相框

    1.什么是Spring相框?Spring有哪些主要模块框架? Spring框架是一个为Java应用程序的开发提供了综合.广泛的基础性支持的Java平台. Spring帮助开发人员攻克了开发中基础性的问 ...

  9. SE 2014年5月6日

    如图配置: 三台交换机两两相连接,构成一二层环路,同时为了保证链路的较为可靠,使用双线链接 请用自己的语言描述以上拓扑搭建的优劣势:并使用哪些技术较为合理,请描述并实施 SW3为接入层交换机,下链接三 ...

  10. 从零開始学习OpenCL开发(一)架构

    多谢大家关注 转载本文请注明:http://blog.csdn.net/leonwei/article/details/8880012 本文将作为我<从零開始做OpenCL开发>系列文章的 ...