对之前写的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 相关文章推荐
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
详解angular 中的自定义指令之详解API
Jun 20 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
vue实现购物车小案例
Sep 27 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 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
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
canvas绘制多边形
2017/02/24 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
webpack项目轻松混用css module的方法
2018/06/12 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
python pygame实现五子棋小游戏
2020/10/26 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
普通员工辞职信
2014/01/17 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
开学第一周值周总结
2015/07/16 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
在JavaScript中如何使用宏详解
2021/05/06 Javascript
Python连续赋值需要注意的一些问题
2021/06/03 Python
python for循环赋值问题
2021/06/03 Python