对jquery分页的升级
以前写的分页用了好久了,但是分页时除了传页面外有时还要传一些其它参数,以前操作时要把传的参数放到隐藏hidden中,分页时在取出来,这样比较麻烦,今天无事,重新包装了一下
直接上代码吧
css用了bootstrap中分页的样式
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination > li {
display: inline;
}
.pagination > li > a,
.pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.428571429;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
margin-left: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
background-color: #eeeeee;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
z-index: 2;
color: #ffffff;
cursor: default;
background-color: #428bca;
border-color: #428bca;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
color: #999999;
cursor: not-allowed;
background-color: #ffffff;
border-color: #dddddd;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
padding: 10px 16px;
font-size: 18px;
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
padding: 5px 10px;
font-size: 12px;
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
分页代码:
- (function ($) {
- var PageFunc = function PageFunc() { }
- $.PageFunc = function (Total, PageSize, curPageNum, FunUrl,paramStr) {
- if (PageSize == "" || PageSize == null || PageSize == undefined) {
- PageSize = 10;
- }
- if (curPageNum == "" || curPageNum == null || curPageNum == undefined) {
- curPageNum = 1;
- }
- var hasParam=true;
- if (paramStr == "" || paramStr == null || paramStr == undefined) {
- hasParam = false;
- }
- //计算总页数
- Total = parseInt(Total); //总记录数
- PageSize = parseInt(PageSize); //每页显示数
- curPageNum = parseInt(curPageNum); //当前页
- //总页数
- var AllPage = Math.floor(Total / PageSize);
- if (Total % PageSize != 0) {
- AllPage++;
- }
- var navHtml = "<ul style='margin:0 0 0 0;' class='pagination'>";
- if (curPageNum <= 0)
- curPageNum = 1;
- if (AllPage > 1) {
- if (curPageNum != 1) {
- //处理首页连接
- var home=1;
- if(hasParam)
- {
- home=home+","+paramStr;
- }
- navHtml += "<li><a href='javascript:" + FunUrl + "("+home+")' >|<</a></li>";
- }
- if (curPageNum > 1) {
- var previous=parseInt(parseInt(curPageNum) - 1);
- if(hasParam)
- {
- previous=previous+","+paramStr;
- }
- //处理上一页的连接
- navHtml += "<li><a href='javascript:"+FunUrl+"("+previous+")' ><<</a></li>";
- }
- else {
- navHtml += "<li class='disabled'><a><<</a></li>";
- }
- var currint = 5;
- for (var i = 0; i <= 10; i++) {
- //一共最多显示10个页码,前面5个,后面5个
- if ((curPageNum + i - currint) >= 1 && (curPageNum + i - currint) <= AllPage)
- if (currint == i) {
- //当前页处理
- navHtml += "<li class='active'><a>" + curPageNum + "<span class='sr-only'>(current)</span></a></li>";
- }
- else {
- //一般页处理
- var n = parseInt(parseInt(curPageNum) + parseInt(i) - parseInt(currint));
- var nstr=n;
- if(hasParam)
- {
- nstr=nstr+","+paramStr;
- }
- navHtml += "<li><a href='javascript:" + FunUrl + "("+nstr+")'>" + n + "</a></li>";
- }
- }
- if (curPageNum < AllPage) {
- //处理下一页的链接
- var next=parseInt(parseInt(curPageNum) + 1);
- if(hasParam)
- {
- next=next+","+paramStr;
- }
- navHtml += "<li><a href='javascript:" + FunUrl + "("+next+")'>>></a></li>";
- }
- else {
- navHtml += "<li class='disabled'><a>>></a></li>";
- }
- if (curPageNum != AllPage) {
- var last=parseInt(AllPage);
- if(hasParam)
- {
- last=last+","+paramStr;
- }
- navHtml += "<li><a href='javascript:" + FunUrl + "("+last+")' >>|</a></li>";
- }
- }
- if(parseInt(AllPage)!=0)
- {
- navHtml += "<li><a>" + curPageNum + "/" + AllPage + "</a></li> ";
- }
- navHtml+="</ul>";
- return navHtml;
- };
- })(jQuery);
调用方法:
注意:第一参数一定要是当前页的值啊
- function aa(curpage,param1,param2){
- if (curpage == "" || curpage == null || curpage == undefined) {
- curpage = 1;
- }
- var pagesize = 5;
- var paramStr="";
- paramStr=param1+","+param2+";
- $.post("/appdefult/apporder",{"categoryId":param1,"name":param2,"curpage":curpage,"pagesize":pagesize},function(mydata){
- var pageHtml= $.PageFunc(mydata.total, pagesize, curpage, "aa",paramStr);
- $(".page").html(pageHtml);
- },"json");
- }
对jquery分页的升级的更多相关文章
- 一个强大的jquery分页插件
点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...
- 分享5种风格的 jQuery 分页效果【附代码】
jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示 源码下载 各个 ...
- 简单的JQuery分页代码
1. [代码][JavaScript]代码 001 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...
- JQuery 分页实现
JQuery分页实现 css: .liList0 { padding-left:5px;}.liList0 li { width:160px; float:left; display:inline ...
- 21个很棒的jQuery分页插件下载
分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...
- jQuery 分页插件 jqPagination的使用
jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...
- Jquery 分页插件 Jquery Pagination
Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...
- jquery 分页控件2
jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...
- jquery 分页控件1
jquery 分页控件(一) 以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许 ...
随机推荐
- pod 安装总结
参考http://code4app.com/article/cocoapods-install-usage http://www.jianshu.com/p/32d9cfb91471 原文:http: ...
- a 标签 启用或禁用点击事件
<a href="#" id="btnAuthCode" class="authCode_btn">获取验证码</a> ...
- Memcached: List all keys
In the general case, there is no way to list all the keys that a memcached instance is storing. You ...
- O(n)求1-n的逆元
转自:http://www.2cto.com/kf/201401/272375.html 新学的一个求逆元的方法: inv[i] = ( MOD - MOD / i ) * inv[MOD%i] % ...
- Android-adb指令
adb概念: adb的全称为Android Debug Bridge(调试桥):通过adb我们可以在Eclipse中方便通过DDMS来调试Android程序.当我们运行Eclipse时ADB进程 ...
- ionic 踩过的坑
内联模板 : script可能你没有注意过,HTML中常用的script标签在AngularJS中被重新定义了: 除了原来的脚本声明功能之外,如果script元素的type属性 定义为text/ng- ...
- Java数据校验(Bean Validation / JSR303)
文档: http://beanvalidation.org/1.1/spec/ API : http://docs.jboss.org/hibernate/beanvalidation/spec/1. ...
- Unity字节序问题
问题 Unity中有些配置信息并不想在发布之后给其他人看到,所以在打包的时候进行了简单的编码处理,然后保存为.bytes类型,读取的时候再进行解码处理.今天遇到的很奇葩的问题是: 如果bytes文件U ...
- phpv6_css
global @charset "utf-8"; /* CSS Document */ /*格式化样式*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3, ...
- reg
<div class="login-module"> <div class="wide c login"> <form id=&q ...