对之前写的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 相关文章推荐
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
js 实现复制到粘贴板的功能代码
May 13 Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
javascript中闭包closure的深入讲解
Mar 03 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中对数据库操作的封装
2006/10/09 PHP
php 不同编码下的字符串长度区分
2009/09/26 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
php制作动态随机验证码
2015/02/12 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
QML实现圆环颜色选择器
2019/09/25 Javascript
vuex入门最详细整理
2020/03/04 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
python判断元素是否存在的实例方法
2020/09/24 Python
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
学校校庆演讲稿
2014/05/22 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang