对之前写的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中使用构造函数实现继承的代码
Aug 12 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
js实现带搜索功能的下拉框
Jan 11 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
php简单统计在线人数的方法
2016/05/10 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
javascript模块化简单解析
2016/04/07 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
python实现的阳历转阴历(农历)算法
2014/04/25 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python flask安装和命令详解
2019/04/02 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
python向图片里添加文字
2019/11/26 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
什么时候用assert
2015/05/08 面试题
采购主管岗位职责
2014/02/01 职场文书
中国合伙人观后感
2015/06/02 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书