插件介绍

此插件是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. vs2015添加ActiveX Control Test Container工具(转载)

    http://blog.csdn.net/lphbtm/article/details/8647565 vs2010 中添加 ActiveX Control Test Container工具(转载) ...

  2. python 标准库 -- re

    re 正则表达式 语法 import re m = re.search('[0-9]','abc4def67') # 匹配字符及匹配范围 print m.group(0) # 返回匹配结果 re.se ...

  3. Filter自动登录

    Dao层略过 Domain略过 Service层过 Web层 Select逻辑 获取表单数据,Web-service--Dao返回用户信息 如果返回不为null否则,重定向到登录页面.则判断用户是否勾 ...

  4. MySQL,Oracle,PostgreSQL 数据库web维护客户端管理工具

    TreeDMS数据库管理系统使用JAVA开发,采用稳定通用的springMVC +JDBC架构,实现基于WEB方式对 MySQL,Oracle,PostgreSQL 等数据库进行维护管理操作. 功能包 ...

  5. 30岁程序员的选择,一线OR二线?

    作为一个30刚出头的IT行业从业者,先介绍下我自己的情况.虽然不具有代表性,但是也可以作为一个参考.本人08年本科毕业于一所还算不错的211大学计算机专业(04年去的时候综合排名38,毕业走时排名45 ...

  6. 怎么样刷新frameset的整个页面

    <a href="main.html?a=2" target="_parent">?  设置a链接的target属性值为_parent即可

  7. CSS 实现流布局以及多列混合布局

    基本流布局 <!DOCTYPE html > <html> <head> <meta charset="utf-8"> <ti ...

  8. accp8.0转换教材第2章初识MySQL

    首先安装MySQL: 一.单词部分: ①networking网络②option选择③port端口④firewall防火墙⑤engine引擎 ⑥standard标准⑦character字符⑧collat ...

  9. JavaSE中Collection集合框架学习笔记(1)——具有索引的List

    前言:因为最近要重新找工作,Collection(集合)是面试中出现频率非常高的基础考察点,所以好好恶补了一番. 复习过程中深感之前的学习不系统,而且不能再像刚毕业那样死背面试题,例如:String是 ...

  10. JavaSE中Collection集合框架学习笔记(2)——拒绝重复内容的Set和支持队列操作的Queue

    前言:俗话说“金三银四铜五”,不知道我要在这段时间找工作会不会很艰难.不管了,工作三年之后就当给自己放个暑假. 面试当中Collection(集合)是基础重点.我在网上看了几篇讲Collection的 ...