JqueryPagination 分页插件使用说明
JqueryPagination是个简单轻量级的分页插件,使用起来很容易,只要初始化一个实例,并设置总数量、翻页回调函数、其它参数就可以实现无刷新分页功能了
1 首先引入相关js文件:
<link href="Scripts/pagination.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> // 个人发现插件对1.4版不支持
<script src="Scripts/jquery.pagination.js" type="text/javascript"></script>
2 编写html代码,在页面添加一个div
<div id="pagination">
</div>
添加javascript 代码,实例化分页插件
$(function () {
var pageCount=50; //分页总数量
// $("#pagination").pagination(pageCount); //简单初始化方法
$("#pagination").pagination(pageCount, //分布总数量,必须参数
{
callback: PageCallback, //PageCallback() 为翻页调用次函数。
prev_text: "« 上一页",
next_text: "下一页 »",
items_per_page:10,
num_edge_entries: 2, //两侧首尾分页条目数
num_display_entries: 10, //连续分页主体部分分页条目数
current_page: 0, //当前页索引
link_to: "?id=__id__" //分页的js中会自动把"__id__"替换为当前的数。0
});
}); function PageCallback(page_index,jq)
{
$.ajax({
type: "POST",
dataType: "text",
url: '后台处理地址', //提交到一般处理程序请求数据
data: "pageIndex=" + (pageIndex) + "&pageSize=" + pageSize, //提交两个参数:pageIndex(页面索引),pageSize(显示条数)
success: function(data) {
//后台服务返回数据,重新加载数据
}
});
}
4 插件pagination()方法参数
| 参数名 | 描述 | 参数值 |
|---|---|---|
| maxentries | 总条目数 | 必选参数,整数 |
| items_per_page | 每页显示的条目数 | 可选参数,默认是10 |
| num_display_entries | 连续分页主体部分显示的分页条目数 | 可选参数,默认是10 |
| current_page | 当前选中的页面 | 可选参数,默认是0,表示第1页 |
| num_edge_entries | 两侧显示的首尾分页的条目数 | 可选参数,默认是0 |
| link_to | 分页的链接 | 字符串,可选参数,默认是"#" |
| prev_text | “前一页”分页按钮上显示的文字 | 字符串参数,可选,默认是"Prev" |
| next_text | “下一页”分页按钮上显示的文字 | 字符串参数,可选,默认是"Next" |
| ellipse_text | 省略的页数用什么文字表示 | 可选字符串参数,默认是"…" |
| prev_show_always | 是否显示“前一页”分页按钮 | 布尔型,可选参数,默认为true,即显示“前一页”按钮 |
| next_show_always | 是否显示“下一页”分页按钮 | 布尔型,可选参数,默认为true,即显示“下一页”按钮 |
| callback | 回调函数 | 当点击链接的时候此函数被调用,此函数接受两个参数,新一页的id和pagination容器(一个DOM元素)。如果回调函数返回false,则pagination事件停止执行 |
| load_first_page |
初始化时是否执行回调函数 | 如果为true则当插件初始化时回调函数被执行。如果你通过ajax来显示内容,那么在初始化分页插件时应把它设置为false;默认值: true |
5 插件其它方法
// 自定义事件触发分页
// 跳到第3页
$("#pagination").trigger('setPage', [2]);
// 下一页
$("#pagination").trigger('nextPage');
// 上一页
$("#pagination").trigger('prevPage');
后台代码就贴出来了,一般是返回json格式的数据到前面处理。
总结:JqueryPagination使用简单,只需要设置参数和回调函数就可以用,通过回调函数处理 翻页触发的事件,比较灵活。
JqueryPagination 分页插件使用说明的更多相关文章
- JQueryPagination分页插件,ajax从struts请求数据
2017-07-16 学完了struts,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址 http://www.jq22.com/jquery-info13 ...
- Jquery Pagination分页插件使用
JqueryPagination是个简单轻量级的分页插件,使用起来很容易,只要初始化一个实例,并设置总数量.翻页回调函数.其它参数就可以实现无刷新分页功能了. 准备工作 下载jquery.min.js ...
- Jquery前端分页插件pagination使用
插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...
- MVC如何使用开源分页插件shenniu.pager.js
最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...
- 分页插件--根据Bootstrap Paginator改写的js插件
刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两 ...
- [原创]jquery+css3打造一款ajax分页插件
最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是 ...
- 一个强大的jquery分页插件
点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...
- 【SSM 5】Mybatis分页插件的使用
一.添加maven依赖项 <span style="font-family:KaiTi_GB2312;font-size:18px;"><dependency&g ...
- Mybatis分页插件
mybatis配置 <!-- mybatis分页插件 --> <bean id="pagehelper" class="com.github.pageh ...
随机推荐
- cocos2dx 读取json及解析
ball.json 数据例如以下: { "entities": [ { "entity": { "TapOpposite": 0, &quo ...
- oc-15-匿名对象
/** 匿名对象 1.访问成员变量--->只能给成员变量设置值,只能成功1次,每次都是新的对象. 2.调用方法时类似类方法: 跟类方法区别:匿名对象创建对象了,开辟空间了. */ #import ...
- 教程:如何减小iOS应用程序的大小?
本文译自:Reducing the size of my App Q: 怎样才能让我的程序安装包小一点,让程序的下载和安装更快速? A: 本文收集了一些减小程序安装包大小的相关技巧(当第一次下载和安装 ...
- 加密数据的填充方式(Padding)
1.填充数据为填充字节的长度 这种填充方式中,填充字符串由一个字节序列组成,每个字节填充该字节序列的长度.假定块长度为8,原文数据长度9,则填充字节数等于0x07:如果明文数据长度为8的整数倍,则填充 ...
- c基础补充
一:字符串在C语言中 字符串一般是动态分配和字符数组两种形式 动态分配的时候字符串字符串指针是4个字节 字符串的大小根据自己的需要来申请 比如: char * c://C为字符串指针 占用四个字节 c ...
- alljoyn连接时-fno-rtti选项测试结果
以AllJoyn自带的chat示例在pc上测试结果如下: libAllJoyn.a编译选项 Chat编译选项 测试结果 -Wall -Werror=non-virtual-dtor -pipe -st ...
- NSNotificationCenter 使用姿势详解
来源:JamesYu 链接:http://www.jianshu.com/p/a4d519e4e0d5 最近在做平板的过程中,发现了一些很不规范的代码.偶然修复支付bug的时候,看到其他项目代码,使用 ...
- Cows
Farmer John's cows have discovered that the clover growing along the ridge of the hill (which we can ...
- 【Python千问 2】Python核心编程(第二版)-- 欢迎来到Python世界
1.1 什么是Python 继承了传统编译语言的强大性和通用性,同时也借鉴了简单脚本和解释语言的易用性. 1.2 起源 来源于某个项目,那些程序员利用手边现有的工具辛苦工作着,他们设想并开发了更好的解 ...
- web前端开发(2)
搜索引擎只能通过标签判断网页的语义. table布局代码量大.对搜素引擎不友好,应该使用div+css布局,使用css控制网页中元素的大小.颜色.位置,让html在样式.结构混杂的局面中挣脱出来,专注 ...