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

Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。我们一起来看看下面这些优秀的分页插件。

1.Client-side jQuery pagination plugin : jPages

jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放、按键翻页、延迟加载等等。

浏览详情  在线演示

2. jPaginate: A Fancy jQuery Pagination Plugin

jPaginate 是一款非常精致的分页插件,提供了五种形式的DEMO,支持鼠标悬停翻页功能。

浏览详情  在线演示

3. SimplePager – jQuery paging plugin

SimplePager 是非常简洁的 jQuery 分页插件,用最少的参数配置实现满足需要的分页功能。

浏览详情  在线演示

4. jQuery ScrollPagination

jQuery 滚动翻页插件 由 Anderson Ferminiano 开发,可以在项目中免费使用。

浏览详情  在线演示

5. jqPagination A jQuery pagination plugin

jqPagination 提供了一种新颖的分页方式,用表现当期所处的页码形式取代传统的页码列表模式。

浏览详情  在线演示

6. Extreme Makeover: jPaginator CSS3 Edition

jPaginator 这款分页插件用于改进长翻页列表的用户体验,使用一个滑动条来快速翻页。

浏览详情  在线演示

7. Sausage : jQuery infinite Pagination with Demo

Sausage 是一款非常优秀的分页插件,用于实现页面的无限制滚动分页功能。

浏览详情  在线演示

8. Xarg : Ajax jQuery Pagination

Xarg jQuery 分页插件,有多种分页形式供选择,可以帮助你实现各种需求的分页效果。

浏览详情  在线演示

9. jPaginator: jQuery Pagination Plugin

jPaginator 是一款非常轻量的 jQuery 分页插件,也非常有特色,提供了方便使用的滑动翻页功能。

浏览详情  在线演示

10. jQuery Pagination Plugin

这款分页插件虽然效果简洁,但是是学习 jQuery 翻页功能非常好的例子。

浏览详情  在线演示

11. Sweet Pages: A jQuery Pagination Solution

Sweet Pages 是效果非常精美的一款分页插件,效果有点类似于幻灯片的翻页。

浏览详情  在线演示

12. AJAX Pagination using jQuery and PHP with Animation

最后推荐的这款 jQuery 分页插件拥有充满吸引力的动画效果,相信你会喜欢的。

浏览详情  在线演示

时间: 2012-08-06

jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版 或中文翻译修改版 一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex

jQuery Ajax 实现分页 kkpager插件实例代码

代码片段一: <!--分页组件 JS CSS 开始--> <!--分页组件 CSS--> <link type="text/css" href="/resource/css/kkpager_blue.css" rel="external nofollow" rel="stylesheet" /> <!--分页组件 JS--> <script type="text/

jquery ajax分页插件的简单实现

说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 pageSize: 10, preText: "pre", nextText: "next", firstText: "First", lastText: "Last", shiftingLeft: 3, shiftingRig

jquery+css3打造一款ajax分页插件(自写)

最近公司的项目将好多分页改成了ajax的前台分页 以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果 如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现 css3的动画本来就是帮我们取代js中这部分动画代码的 使js更纯粹地去实现逻辑 效果图如下: 调用代码如下: 包括常用的加载失败重试,参数可配置是否能手动输入页码,设置按钮数目,可以调用多个page等等,调用代码很简便 <script type="text/javascript"> var

jQuery ajax分页插件实例代码

推荐阅读:jQuery插件开发精品教程让你的jQuery提升一个台阶 既然说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构:(我觉得对咱们程序员来说再优美的文字描述.介绍也 比不上代码来得实在.) 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 pageSize: , preText: "pre", nextText: "next", firstText: &quo

Ajax分页插件Pagination从前台jQuery到后端java总结

困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目.下面我要分享下我这个项目的分页代码,前后端通吃.希望前辈多多指教. 一.效果图 下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码. 二.上代码前的一些知识点 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 三.前台代码部分 var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 $(function(

jquery分页插件pagination使用教程

pagination使用起来非常的方便. 第一步:引入分页需要的js(jquery.pagination.js)和css(pagination.css) pagination插件下载地址 第二步:将分页条容器写到页面里(固定代码) <div class="pages"> <div id="Pagination"></div> <div class="searchPage" id="searchP

封装好的javascript前端分页插件pagination

摘要:     最近在开发项目中又用到了前端分页,以前也做过,为了方便以后使用所以将他封装成第三方插件,不依赖任何库.网上已经有很多插件,问什么还要自己造轮子? 自己写的扩展性高 不依赖任何库 作为一次技术沉淀 先看下效果图 安装方法 首先在页面中要载入css及js <link rel="stylesheet" href="dist/pagination.css"> <script src="dist/pagination.js"

jQuery分页插件jquery.pagination.js使用方法解析

jquery.pagination.js插件,此jQuery插件为Ajax分页插件,一次性加载全部数据,故分页切换时无刷新与延迟,只是重写指定dom元素中的html内容,如果数据量较大不建议用此方法,因为加载会比较慢: jQuery的多数插件使用都比较简单,都能查找出相关api,且含有demo: 使用此插件,首先在页面(jsp.html)中引入其js.css文件 <link href="/自定义路劲/jquery.pagination/pagination.css" rel=&q

jQuery Pagination分页插件_动力节点Java学院整理

插件简介 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持text-align的定位. 使用方法 跟一般的jQuery插件一样,此插件使用也很简单便捷.方法是pagination,例如$("#page").pagination(100); 参数 参数名 描述 参数值 maxentries 总