插件介绍

此插件是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. 13.ThreadPoolExecutor线程池之submit方法

    jdk1.7.0_79  在上一篇<ThreadPoolExecutor线程池原理及其execute方法>中提到了线程池ThreadPoolExecutor的原理以及它的execute方法 ...

  2. 逻辑关系下的NN应用

    ​ 自己好奇搜了几篇别人对Ng视频的的笔记,读下去可观性很强,后回到自己的笔记却觉得矛盾很多,有些地方搞得很模糊,自己没有仔细去想导致写完读起来很怪,此篇之后我决定放慢记笔记的速度,力求尽多地搞清楚模 ...

  3. java基础(System.err和System.out)

    今天有位同事在使用System.err和System.out遇上了一些小问题. 看了些资料总结下: 1.JDK文档对两者的解释: out: "标准"输出流.此流已打开并准备接受输出 ...

  4. 一劳永逸的解决AFNetworking3.0网络请求问题(面向对象封装大法,block回调)

    AFNetworking在iOS网络请求第三方库中占据着半壁江山,前段时间将AFNetworking进行了3.0版本的迁移,运用面向对象的设计将代码进行封装整合,这篇文章主要为还在寻找AFNetwor ...

  5. c/c++面试准备笔记1

    在c++程序中调用被C编译器编译后的函数,为什么要加extern  "C"? C++语言支持函数重载,C语言不支持函数重载.函数被C++编译后在库中的名字与C语言的不同.C++提供 ...

  6. oracle表空间增长异常或表空间占用过高问题分析

    本人对oracle调优还处在不断学习状态,这个问题是之前处理的项目上遇到过的,顺利解决了,分享下此类问题的处理思路,不足之处,还请指正. 项目上反馈说业务表空间增长越来越快,上次新增的30G数据文件, ...

  7. linux下如何解压和压缩文件

    1.*.tar 用 tar –xvf 解压 2.*.gz 用 gzip -d或者gunzip 解压 3.*.tar.gz和*.tgz 用 tar –xzf 解压 4.*.bz2 用 bzip2 -d或 ...

  8. Administrator账户密码忘了怎么办

    WIN7的Administrator账户密码忘了怎么办   1.准备一个带有winpe系统的系统光盘或者U盘 2.启动电脑,按F12选择U盘或者光盘启动,进入winpe操作系统 3.找到c:\wind ...

  9. 【LeetCode】332. Reconstruct Itinerary

    题目: Given a list of airline tickets represented by pairs of departure and arrival airports [from, to ...

  10. 【LeetCode】66. Plus One

    题目: Given a non-negative number represented as an array of digits, plus one to the number. The digit ...