浅谈jQuery Pagination Ajax 分页插件的使用
插件介绍
此插件是jQuery的ajax分页插件。分页切换时无刷新也无延迟,因为是一次性加载的。如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好!
插件使用
此插件使用比较简单。主要引入以下文件就可以用了
1.jquery.js依赖库
2.pagination.css 这个主要是样式,我们在元素使用的时候将分页列表放在class类为pagination的标签内即可
<div class='pagination'></div>
3.jquery.pagination.js 分页的主要骨架
参数说明

使用方法
$("#Pagination").pagination(pageCount, {
num_edge_entries: 2,
num_display_entries: 4
callback: pageselectCallback,
items_per_page:10,
prev_text: "<上一页",
next_text: "下一页>"
});
上面代码中的pageCount一般是从后台返回的总的数据条数,也就是你一共有多少条数据。num_dege_entries:2表示首尾两侧分页显示2个。num_display_entries:4表示的是连续分页显示的主体数目,item_per_page:每页显示的列表项为10个。callback:pageselectCallback为回调函数。prev_text和next_text为前一页下一页按钮上的显示文字,默认的话是Prev 和 Next。
主要代码与效果展示
1.效果图

2.主要代码
//首次查询:
offline_mark = keeper_offline("1");
if (offline_mark != false) {
offlinePageMark();//分页查询
}
//--分页
function offlinePageMark(){
$("#offlinePage").pagination(offline_mark, {
num_edge_entries: 1, //边缘页数
num_display_entries: 5,//主体页数
callback: offlinePageCallback,
items_per_page: 2, //每页显示2项
prev_text: "<上一页",
next_text: "下一页>"
});
} function offlinePageCallback(page_index, jq) {
var page_index = parseInt(page_index + 1);
keeper_offline(page_index);
return false;
}
function keeper_offline(pageStr){
var offline_mark = false;
var params={};
params.helperId=helperId;
params.homeStatus = "offline";
params.page = pageStr;
$.ajax({
type: 'post',
dataType: 'json',
async:true,
url: house_keeperURL,
data:{params:JSON.stringify(params)},
success: function (result) {
if (result.retCode=="0000"){
offline_mark = result.pageCount;
//列表内容展示代码集,太多了,就省略了,根据各自需求去展示自己的内容就可以了
}else{
}
}
})
return offline_mark;
}
总结:
jquery pagination 是一个很好用的分页插件,展示的效果也是能适应大多需求的,样式的话也可以自己去改她的css就可以了。上手极其容易。我刚始接触分页的时候,并没有用这个插件。而是自己去写的一些共通的方法,代码也不多。后来,有了她,我就直接用她了。不过,我现在也不用她去分页了,现在用的就是layui的分页插件。如果还有不懂的童鞋,可以给我留言你的问题。
浅谈jQuery Pagination Ajax 分页插件的使用的更多相关文章
- jQuery Pagination Ajax分页插件中文详解(摘)
jQuery Pagination Ajax分页插件中文详解 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxin ...
- [转]jQuery Pagination Ajax分页插件中文详解
在做项目时需要用到在前端页面中需要实现分页显示的功能,类似于博客园下面的分页导航.从网上找了几个,觉得下面这个使用起来非常简单,也很方便.特在这里记录一下. 以下为文章原文. 中文项目地址:http: ...
- jQuery Pagination Ajax分页插件中文详解(转)
一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面 二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此 ...
- 源码来袭!!!基于jquery的ajax分页插件(demo+源码)
前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...
- jquery.pagination.js分页插件的使用
Pagination的相关参数: Pagination使用的核心代码: //回调函数 function pageselectCallback(page_index, j ...
- 精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- 转:精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- 12款优秀 jQuery Ajax 分页插件和教程
12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...
- 12款优秀jQuery Ajax分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
随机推荐
- [1] 插件架构(PLUG-IN)
网上的一种比较好对插件的定义是:插件(Plug-in,又称addin.add-in.addon或add-on,又译外挂)也称为扩展,是一种遵循一定规范的应用程序接口编写出来的程序,主要是用来扩展软件功 ...
- [0] Visual studio 2010 快捷键大全
[窗口快捷键]Ctrl+W,W: 浏览器窗口 Ctrl+W,S: 解决方案管理器 Ctrl+W,C: 类视图 Ctrl+W,E: 错误列表 Ctrl+W,O: 输出视图 trl+W,P: 属性窗口 C ...
- 字符串距离 简单DP
字符串距离 时间限制: 1 Sec 内存限制: 128 MB 题目描述 设有字符串 X,我们称在 X 的头尾及中间插入任意多个空格后构成的新字符串为 X 的扩展串,如字符串 X 为"abc ...
- [Tool] Git 使用 与 Git Flow
目录 简介 Git 命令 Git Flow 简介 Git是目前世界上最先进的分布式版本控制系统(没有之一). Linus花了两周时间自己用C写了一个分布式版本控制系统,这就是Git!一个月之内,Lin ...
- html模板中的数字保留两位小数
<script> //html模板中的数字保留两位小数 function formatCurrency(num) { num = num.toString().replace(/\$|\, ...
- Swift字符串可变性
您可以通过将一个特定字符串分配给一个变量来对其进行修改,或者分配给一个常量来保证其不会被修改: var variableString = "Horse" variableStrin ...
- bootstrap-datepicker的bug:有日期输入的地方在下个月页面选择当天日期会以当天日期减少一个月显示
Bug复现详细描述:先选择今日日期,然后点击下个月的某个日期,注意,是直接点击下个月的某个日期,不能通过日期显示tab的下个月箭头进入下个月再来点击某个日期,然后再直接点击本月的今日日期.然后bug会 ...
- GNU的makefile文件编写说明
这篇文章讲的相当详细,转来收藏: linux下Makefile学习 MAC
- touchmover手机移动端的拖动
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...
- 15个必须知道的 Chrome 开发技巧
在 Web 开发者中,Chrome 是使用最广泛的浏览器.六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具.你可能已经熟悉了它的部分功能,如使用 console 和 d ...