无刷新分页 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会对这些点击事件(用户点击广告的行为)和激活事…

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…

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;一旦发生数据误删除…

线程启动语句的顺序是否决定线程的执行次序。_详细分析 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…

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

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

java 正则表达式 替换字符串img标签的路径_正则表达式和有限自动机的应用

1. 为什么谈有限自动机时要谈正则表达式&#xff1f;原因是&#xff1a;正则表达式所匹配的所有字符串所构成的语言可以用有限自动机识别。根本原因是&#xff1a;正则集&#xff08;正则表达式所匹配的所有字符串集合&#xff09;是由右线性文法&#xff08;3型文法&#xff0…

14.6 Spring MVC 测试框架(翻译)

14.6 Spring MVC 测试框架&#xff08;每天翻译一点点&#xff09; Spring MVC测试框架对 Spring MVC 代码提供一流的测试支持 &#xff0c;它拥有一个 fluent API ,可以和JUnit, TestNG 或其它任何测试框架协同使用。 此测试框架基于 spring-test 模块的Servlet API mock obje…

html读取本地txt_手机本地电子书籍阅读器 — 静读天下

在早期山寨按键手机流行的年代手机中必装两款软件莫过于Anyview和Opera浏览器了&#xff0c;一个是本地最佳阅读工具另一个是压缩流量访问网页的利器&#xff0c;时过境迁好多人都早以忘记了这些昔日的王者。曾经那帮挑灯夜读看小说的熊孩子都已经长大了&#xff0c;在难得的休…

华为手机丢失定位网站_手机端网站优化要从网站的设计和定位开始入手

移动端网站优化要从网站的设计和定位开始入手&#xff0c;重要的是简洁易用&#xff0c;切忌复杂&#xff0c;令用户搞不明白找不到想用的。对于搜索引擎而言&#xff0c;好的用户访问体验也是排名的最佳标准。下面小编就来分析一下设计对手机端网站优化排名的影响。1、使用规范…

安卓接受后台数据转换解析出错_安卓手机内存越大,速度就会越快?

与非网 2 月 18 日讯&#xff0c;现在安卓手机的内存在产品规划上越来越大&#xff0c;2020 年发布的旗舰手机运行内存已经拓展到惊人的 10GB 以上&#xff0c;而这个运存大小已经超过笔记本主流的 8GB 内存&#xff0c;手机到底需要这么大的内存吗&#xff1f;安卓手机的内存为…

ipv6地址格式_IPV6与IPV4的差异

ipv6相比&#xff0c;我们现在的IPV4,有什么优势&#xff0c;有什么差异IPv6的路由表更小,IPv6的组播支持以及对流的支持增强,IPv6加入了对自动配置的支持,IPv6具有更高的安全性. 与IPV4相比&#xff0c;IPV6具有以下几个优势&#xff1a;IPv6具有更大的地址空间。IPv4中规定IP…

反序列化对象列表发生异常_通过反序列化漏洞,黑客能做什么呢?

在之前的文章中讲解了一个反序列化的例子&#xff0c;我们已经知道&#xff0c;通过反序列化漏洞&#xff0c;黑客可以调用到Runtime.exec()来进行命令执行。换一句话说&#xff0c;黑客已经能够在服务器上执行任意的命令&#xff0c;这就相当于间接掌控了你的服务器&#xff0…

tcl之内容

转载于:https://www.cnblogs.com/chip/p/5847126.html