对之前写的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 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 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
简单的页面缓冲技术
2006/10/09 PHP
php+javascript的日历控件
2009/11/19 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
JS Input里添加小图标的两种方法
2017/11/11 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
Python WSGI的深入理解
2018/08/01 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
分享一个python的aes加密代码
2020/12/22 Python
西尔斯百货官网:Sears
2016/09/06 全球购物
应届电子商务毕业自荐书范文
2014/02/11 职场文书
公司合作意向书
2014/04/01 职场文书
企业务虚会发言材料
2014/10/20 职场文书
目标责任书格式范文
2015/05/11 职场文书
SQL Server中锁的用法
2022/05/20 SQL Server