无刷新分页 jquery.pagination.js

 序言


这一款js分页使用起来很爽,自己经常用,做项目时总是要翻以前的项目看,不方便,这里就把他写出来方便自己以后粘帖,也希望能分享给大家。

友情提示下:我有一片博客是用着个js实现的无刷新分页也很好用(这篇写的不是无刷新分页),链接地址为:无刷新分页 jquery.pagination.js


参数说明


参数名描述参数值
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事件停止执行

插件代码


js代码

View Code

css代码(有好几款样式供你选择,不错的)

View Code

前端代码


复制代码
 <script src="../js/jquery.pagination.js" type="text/javascript"></script><link href="../css/pagination.css" rel="stylesheet" type="text/css" /><script type="text/javascript">$(function () {function pageselectCallback(page_id, jq) {//alert(page_id); 回调函数,进一步使用请参阅说明文档}$("#Pagination").pagination(<%=pcount%>, {callback: pageselectCallback,//PageCallback() 为翻页调用次函数。prev_text: " 上一页",next_text: "下一页 ",items_per_page: <%=pagesize %>, //每页的数据个数num_display_entries: 3, //两侧首尾分页条目数current_page: <%=page%>,   //当前页码num_edge_entries: 2, //连续分页主体部分分页条目数link_to:"?page=__id__"});InterlacesColor(); //隔行换色(这个不是分页里面的js方法)});</script><asp:Repeater ID="Rpt_UserList" runat="server"><ItemTemplate>
<tr><td><%# Eval("UserName")%></td> </tr><ItemTemplate></asp:Repeater><div id="Pagination" class="right flickr"></div>
复制代码

 


后台代码:


复制代码
 protected int pcount = 0;                                   //总条数protected int page = 0;                                     //当前页protected int pagesize = 5;                                //设置每页显示的大小protected void Page_Load(object sender, EventArgs e){if (!int.TryParse(Request.Params["page"] as string, out this.page)){page = 0;}}#region 数据分页public void PageBind(string where,string order){            bll = new UserAccount();ds = new DataSet();pcount = bll.GetPageCount(where);ds = bll.GetDataByPage(page * pagesize,(page+1)*pagesize,order,where);            if (ds != null && ds.Tables[0].Rows.Count > 0){Rpt_UserList.DataSource = ds;Rpt_UserList.DataBind();}}#endregion
复制代码

样式效果展示:


 <div id="Pagination" class="flickr"></div>

 <div id="Pagination" class="meneame"></div> 

 <div id="Pagination" class="scott"></div> 

 <div id="Pagination" class="quotes"></div> 

 <div id="Pagination" class="black"></div> 

 

好了在此就不疼了,自己用哪一款样式自己找吧,css里面有好多,不够用了,自己也可以修改为自己喜欢的样式。

再次友情链接:无刷新分页 jquery.pagination.js

 



 

补充: 多参数问题   (我的解决方案如下,谁有更好的可以分享下。)


 


 

 

复制代码
 $(function () {function pageselectCallback(page_id, jq) {                      TranUrl(page_id);}$("#Pagination").pagination(<%=pcount%>, {callback: pageselectCallback,//PageCallback() 为翻页调用次函数。prev_text: " 上一页",next_text: "下一页 ",items_per_page: <%=pagesize %>, //每页的数据个数num_display_entries: 3, //两侧首尾分页条目数current_page: <%=page%>,   //当前页码num_edge_entries: 2, //连续分页主体部分分页条目数});//通过修改url来达到分页效果。function  TranUrl(page_id){var url=location.href;var star;if(url.indexOf("aspx?")>0){if(url.indexOf("&page=")>0){                    star=url.indexOf("&page=");url=url.substring(0,star);location.href=url+"&page="+page_id;}else{location.href=url+"&page="+page_id;}}else{location.href=url+"?page="+page_id;}}});
复制代码

转载于:https://www.cnblogs.com/h5monkey/p/5817211.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/430197.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows 10打开或禁用管理员账户

windows 10下默认关闭了管理员账户&#xff0c;因为权限太高&#xff0c;而且win 10推荐通过网络账户登录。如果要使用&#xff0c;可以通过下面的方式打开。 1、登录一个普通账户。 如果你是刚升级上来&#xff0c;普通账户都没有。那么&#xff0c;用别人的电脑下载安装老毛…

hbase filter原理_HBase应用|HBase在移动广告监测产品中的应用

1HBase在Ad Tracking的应用1.1Ad Tracking的业务场景Ad Tracking是TalkingData的移动广告监测产品&#xff0c;其核心业务模型是归因。App用户点击广告之后&#xff0c;及随后安装广告跳转到的应用或者游戏&#xff0c;Ad Tracking会对这些点击事件(用户点击广告的行为)和激活事…

const char *p、char const *p、char *const p

const char *p&#xff1a;p不是常量&#xff0c;可以修改p的值&#xff0c;但不能修改p指向空间的值char const *p与char *const p&#xff1a;p是常量&#xff0c;不能修改p的值&#xff0c;但能修改p指向空间的值const char *const p&#xff1a;两者均为常量&#xff0c;不…

eclipse 快捷键及插件

webstorm设置keymap为eclipse也可使用。 快捷键 快捷键用途使用方法编辑器事件ctrlt打开继承树将鼠标移到某个类上&#xff0c;按ctrltctrl/注释本行altshiefj生成属性注释&#xff0c;这杨的/**/ctrlalt 下箭头复制本行到下一行alt 下箭头移动本行到下一行ctrld删除整行alt/…

drools动态配置规则_关于规则引擎

很早之前就知道Drools&#xff0c;这几天正好有个项目&#xff0c;里面用了大量的规则定义&#xff0c;就想是否能采用Drools来解决。在github上分析了规则引擎项目&#xff0c;包括&#xff1a;Easy-ruleshttps://github.com/j-easy/easy-rules通过程序代码来完成规则引擎&…

linux安装mysql5.6

目录 准备工作 运行环境 确认你的安装版本 下载MySQL 安装MySQL 准备安装环境 编译和安装 配置MySQL 单实例配置 单实例配置方法 添加防火墙 启动MySQL 重启MySQL 多实例配置 什么是多实例 多实例配置方法 创建启动文件 初始化数据库 配置防火墙 启动MySQL 登陆MySQL 重启MySQL…

Spring 4 MVC入门实例

Spring 4发布很长一段时间了&#xff0c;从 Spring 3 到 Spring 4 有巨大的改变。网上还有很多教程是基于 Spring 3.0 的&#xff0c;甚至 Spring 2.5&#xff0c;要想按照网上的教程“按图索骥”还是挺困难的。纵有一些 Spring 4.0 MVC 的教程例子&#xff0c;也往往是 “Spri…

python写入二进制文件的库_python之写入二进制文件

概述 计算机都是以二进制存储文件的&#xff0c;如mp3、图片等&#xff0c;文本文件也是如此&#xff0c;在本节中以二进制模式写入文件 写文件的很多操作&#xff0c;与读文件的操作是相同的&#xff0c;建议先看 读取二进制文件 打开文件 读写文件&#xff0c;要先通过内置op…

Excel文件打不开别担心,看完这些提示或许能让其起死回生

使用Excel电子表格时,大多数人有时要么时间紧迫,要么有最后期限。如果在那个时候,Microsoft Excel如果不打开,那可能是一场噩梦。 不幸的是,当Excel拒绝打开你的一个重要Excel文件,或者无法完全打开Excel应用程序时,这种意外行为非常常见。 所以,如果你遇到“Microso…

gulp插件gulp-ruby-sass和livereload插件

gulp-ruby-sass是gulp的一个插件&#xff0c;主要是用来实现sass编译&#xff0c;livereload插件主要是实现文件保存时浏览器自动刷新&#xff0c;避免了手动f5的频繁的操作 准备工作&#xff1a;chrome浏览器安装livereload插件&#xff0c;没有安装的可以百度搜索或者FQ下载&…

eclipse 创建 maven web 项目教程

&#xff08;1&#xff09;新建一个Maven 项目 file –> new –> maven project 直接点 next 直接点 next 填写groupid和artifactid&#xff0c;这两个可以随便填&#xff0c;名称而已。填完 finish &#xff08;2&#xff09;将项目转成 Dynamic Web项目 选中项目&#…

sql backup database备份d盘_ClickHouse 备份与恢复

本文转载自 万能修实验室 作者&#xff1a;公先生 ID: dropudatabase我们评估一款数据库产品&#xff0c;除了稳定性和易用性外&#xff0c;数据安全也十分重要&#xff0c;备份与恢复往往是最后一道安全门。但如果备份策略不完善、恢复手段无效&#xff0c;一旦发生数据误删除…

ASP.NET MVC Global.cs - 应用程序事件

一、Application_End Application_End:网站关闭,或重启时,会触发该方法 二、Application_Start 第一个访问网站的用户会触发该方法. 通常会在该方法里定义一些系统变量,如聊天室的在线总人数统计,历史访问人数统计的初始化等等均可在这里定义 三、Session_Start 每个用户访问网…

i = i++ 之后 i 的值为什么是 0

运行 ii 之后&#xff0c;i的值是多少&#xff1f;代码如下&#xff1a; public class A{public static void main(String[] args){int i0;ii;System.out.println(i);}} 答案是&#xff1a;打印出 0 为什么呢&#xff1f;是因为java虚拟机中有局部变量区和操作数栈之分。iin…

线程启动语句的顺序是否决定线程的执行次序。_详细分析 Java 中启动线程的正确和错误方式

start 方法和 run 方法的比较代码演示:/** * * start() 和 run() 的比较 * * * author 踏雪彡寻梅 * version 1.0 * date 2020/9/20 - 16:15 * since JDK1.8 */public class StartAndRunMethod { public static void main(String[] args) { // run 方法演示 // 输出: name: mai…

save(),saveOrUpdate(),merge()的区别

save(),saveOrUpdate(),merge()的区别 Save save()方法能够保存实体到数据库&#xff0c;正如方法名称save这个单词所表明的意思。我们能够在事务之外调用这个方法&#xff0c;这也是我不喜欢使用这个方法保存数据的原因。假如两个实体之间有关系&#xff08;例如employee表和a…

microsoft office 卸载不了

microsoft office &#xff08;包括常用的office组件&#xff0c;project&#xff0c;visio&#xff09;等的卸载不是件轻松事&#xff0c;有可能卸载不了&#xff0c;右不会有任何提示&#xff0c;微软也知道自己的东西不好卸载&#xff0c;于是 提供的fix工具。 office 2010…

webgl 游戏_如何选择 WebGL 框架和引擎?

数据可视化Sugar-百度智能云​cloud.baidu.comSugar 是我们从零开始开发的 BI 产品&#xff0c;可以不用写 SQL 制作报表及大屏页面&#xff0c;上半年我们发布了三维场景功能&#xff0c;可以放到大屏中展现&#xff1a;为了实现这个功能&#xff0c;我们调研了大量 WebGL 相关…

Null hypothesis TypeⅠerror Type Ⅱ error

Null hypothesis usually express the phenomenon of no effect or no difference.TypeⅠerror is the incorrect rejection of a true null hypothesis. That is, no difference is taken as difference.Type Ⅱ error is incorrectly retaining a false null hypothesis. Th…

Spring 4 MVC 单元测试例子

首先&#xff0c;要有一个Spring MVC项目&#xff0c;不会的话&#xff0c;点这里看教程。 加入 maven 依赖&#xff1a; <dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.11</version></depend…