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

  1. JQueryPagination分页插件,ajax从struts请求数据

    2017-07-16 学完了struts,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址 http://www.jq22.com/jquery-info13 ...

  2. Jquery Pagination分页插件使用

    JqueryPagination是个简单轻量级的分页插件,使用起来很容易,只要初始化一个实例,并设置总数量.翻页回调函数.其它参数就可以实现无刷新分页功能了. 准备工作 下载jquery.min.js ...

  3. Jquery前端分页插件pagination使用

    插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...

  4. MVC如何使用开源分页插件shenniu.pager.js

    最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...

  5. 分页插件--根据Bootstrap Paginator改写的js插件

    刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两 ...

  6. [原创]jquery+css3打造一款ajax分页插件

    最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是 ...

  7. 一个强大的jquery分页插件

    点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...

  8. 【SSM 5】Mybatis分页插件的使用

    一.添加maven依赖项 <span style="font-family:KaiTi_GB2312;font-size:18px;"><dependency&g ...

  9. Mybatis分页插件

    mybatis配置 <!-- mybatis分页插件 --> <bean id="pagehelper" class="com.github.pageh ...

随机推荐

  1. 【JavaScript】JS中没有代码块的概念

    <script> var m = "roboce"; if(m === "roboce"){ var k = "haha"; } ...

  2. 内存管理和@property的属性

    内存管理和@property的属性 目录 对内存管理的理解 Objective C内存管理方式 内存的管理 对象的所有权和内存管理原则 合理解决内存管理带来的问题 自动释放池 @property的属性 ...

  3. oc-15-匿名对象

    /** 匿名对象 1.访问成员变量--->只能给成员变量设置值,只能成功1次,每次都是新的对象. 2.调用方法时类似类方法: 跟类方法区别:匿名对象创建对象了,开辟空间了. */ #import ...

  4. shell 编程中使用到得if语句内判断参数

    http://blog.chinaunix.net/uid/21411227/cid-63616-list-1.html 1.判断文件类型   –b 当file存在并且是块文件时返回真 -c 当fil ...

  5. -force_load使用办法

    项目中用到Three20框架,同时也使用了讯飞语音的framework,编译时出现类似如下冲突提示信息: ld: duplicate symbol _OBJC_CLASS_$_AdLinks in / ...

  6. 乱谈Qt事件循环嵌套

    本文旨在说明:QDialog::exec().QMenu::exec()等开启的局部事件循环,易用的背后,还有很多的陷阱... 引子 Qt 是事件驱动的,基本上,每一个Qt程序我们都会通过QCoreA ...

  7. QWT6.0.1+win7下安装说明

    A) 简介 1.QWT是一个基于LGPL版权协议的开源项目, 可生成各种统计图.它为具有技术专业背景的程序提供GUI组件和一组实用类,其目标是以基于2D方式的窗体部件来显示数据, 数据源以数值,数组或 ...

  8. 关于在Android设置全局变量随时获取context

    最实在的办法就是继承Application,在里面设置全局变量,因为Application是android的应用入口,并且运行周期贯穿整个程序运行. import android.app.Applic ...

  9. Linux编程之《只运行一个实例》

    概述 有些时候,我们要求一个程序在系统中只能启动一个实例.比如,Windows自带的播放软件Windows Medea Player在Windows里就只能启动一个实例.原因很简单,如果同时启动几个实 ...

  10. 【手把手教你Elmah】如何在MVC.NET项目中在线查看【错误日志】

     一.  在NuGet下载Elmah.MVC dll文件!  或者点击下载dll文件,并且引用客户端. 二.配置WebConfig <sectionGroup name="elmah& ...