对之前写的jquery分页做下升级


Posted in Javascript onJune 19, 2014

以前写的分页用了好久了,但是分页时除了传页面外有时还要传一些其它参数,以前操作时要把传的参数放到隐藏hidden中,分页时在取出来,这样比较麻烦,今天无事,重新包装了一下

直接上代码吧

css用了bootstrap中分页的样式

.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;
}

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

分页代码:

(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");
}
Javascript 相关文章推荐
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 #Javascript
jQuery常用操作方法及常用函数总结
Jun 19 #Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 #Javascript
java和javascript获取word文档的书签位置对比
Jun 19 #Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 #Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 #Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 #Javascript
You might like
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
python文本数据相似度的度量
2018/03/12 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
使用python实现多维数据降维操作
2020/02/24 Python
如何使用repr调试python程序
2020/02/28 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
解决方案设计综合面试题
2015/08/31 面试题
就职演讲稿范文
2014/05/19 职场文书
内勤岗位职责范本
2015/04/13 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
董事长新年致辞
2015/07/29 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js
如何利用python创作字符画
2022/06/25 Python