插件介绍

此插件是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 分页插件的使用的更多相关文章

  1. jQuery Pagination Ajax分页插件中文详解(摘)

    jQuery Pagination Ajax分页插件中文详解 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxin ...

  2. [转]jQuery Pagination Ajax分页插件中文详解

    在做项目时需要用到在前端页面中需要实现分页显示的功能,类似于博客园下面的分页导航.从网上找了几个,觉得下面这个使用起来非常简单,也很方便.特在这里记录一下. 以下为文章原文. 中文项目地址:http: ...

  3. jQuery Pagination Ajax分页插件中文详解(转)

    一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面 二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此 ...

  4. 源码来袭!!!基于jquery的ajax分页插件(demo+源码)

    前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...

  5. jquery.pagination.js分页插件的使用

    Pagination的相关参数: Pagination使用的核心代码:         //回调函数         function pageselectCallback(page_index, j ...

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

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

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

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

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

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

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

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

随机推荐

  1. Vulkan Tutorial 20 Vertex buffer creation

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 在Vulkan中,缓冲区是内存的一块区域,该区域用于向显卡 ...

  2. crontab问题处理

    用pyhton写了一些爬虫,由于数据量比较大,需要跑的时间也比较长,所以将代码部署到服务器上.选择用crontab完成爬虫的定时爬取数据,这样避免了人工的干预,减少一些人为错误.但在部署crontab ...

  3. 【踩坑记录】记一次MySQL主从复制延迟的坑

    最近开发中遇到的一个MySQL主从延迟的坑,记录并总结,避免再次犯同样的错误. 情景 一个活动信息需要审批,审批之后才能生效.因为之后活动要编辑,编辑后也可能触发审批,审批中展示的是编辑前的活动内容, ...

  4. SICP-2.2-数据的抽象

    数据的抽象 生活中有许多的事物具有复合结构,例如地理位置所用的经纬度,便是通过一个复合结构来代表位置,在我们的程序当中,我们设法将经度纬度组合成一对,我们既可以把他们当做一个整体单元来进行操作,而且也 ...

  5. github用法小结

      共享仓库     bare 裸仓库   生成裸仓库时必须以.git结尾.   仓库就相当于一个服务器     ### 创建远程仓库  1. 创建以.git结尾的目录mkdir repo.git 2 ...

  6. Mongodb 参数说明及常见错误处理

       在 CentOS7 上安装 MongoDB 1 通过 SecureCRT 连接至 CentOS7 服务器: 2 进入到 /usr/local/ 目录:cd /usr/local 3 在当前目录下 ...

  7. Django+MySQL开发项目:内容管理系统cms(一)

    Baker-Miller Pink被科学方法证实可以平静情绪并且抑制食欲的颜色,具有amazing的效果.基百里面说实验结果表明该颜色具有: "a marked effect on lowe ...

  8. 修改MySQL数据库密码

    在mysql数据库里面有一个默认安装的数据库是mysql,里面有一个user表.里面的字段Host是运行登录的ip地址,User 是登录的账号Password是密码. use mysql;//使用my ...

  9. Vysor破解助手for Linux/macOS/Windows

    Vysor更新到1.7.8后,之前的破解工具又失效了,但破解的方法依然可用.在更新破解工具的过程中,Vysor又出了1.7.9版本,主要是对Android O做了处理.更新后的破解工具支持1.6.6~ ...

  10. C语言学习随笔

    前段时间我们学习了HTML,感觉自己不在状态,后来就开始怀疑自己的智商呢!现在C语言也到了尾声,在这20天的学习过程中,我没 有以前那么的傲娇了. 我开始慢慢去反省自己,自己究竟该如何去学习,都说勤能 ...