对之前写的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 相关文章推荐
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
微信小程序canvas动态时钟
Oct 22 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
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
浅析Python四种数据类型
2018/09/26 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
华为慧通笔试题
2016/04/22 面试题
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
材料化学应届生求职信
2013/10/09 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
长江三峡导游词
2015/01/31 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript