对之前写的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 相关文章推荐
JS target与currentTarget区别说明
Aug 28 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
vue登录注册实例详解
Sep 14 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
使用PHP编写的SVN类
2013/07/18 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
使javascript也能包含文件
2006/10/26 Javascript
js 分栏效果实现代码
2009/08/29 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
python列表返回重复数据的下标
2020/02/10 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
Ado与Ado.net的相同与不同
2014/12/08 面试题
自我鉴定书面格式
2014/01/13 职场文书
写给老婆的检讨书
2014/02/21 职场文书
企业党员公开承诺书
2014/03/26 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书