对之前写的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 firefox兼容ie的dom方法脚本
May 18 Javascript
javascript新手语法小结
Jun 15 Javascript
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
JS数组的高级使用方法示例小结
Mar 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获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
javascript 树控件 比较好用
2009/06/11 Javascript
jquery 插件开发方法小结
2009/10/23 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
Python socket实现的简单通信功能示例
2018/08/21 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python调用Redis的示例代码
2020/11/24 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
高中毕业自我鉴定范文
2013/10/02 职场文书
大二自我鉴定
2014/01/31 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python