对之前写的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 相关文章推荐
js option删除代码集合
Nov 12 Javascript
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 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
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
python中的全局变量用法分析
2015/06/09 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
python框架django基础指南
2016/09/08 Python
python实现学生管理系统
2018/01/11 Python
实践Vim配置python开发环境
2018/07/02 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
python实现列表的排序方法分享
2019/07/01 Python
基于pandas中expand的作用详解
2019/12/17 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
python else语句在循环中的运用详解
2020/07/06 Python
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
为什么需要版本控制?
2013/08/08 面试题
中层竞聘演讲稿
2014/01/09 职场文书
仓库规划计划书
2014/04/28 职场文书
文明礼仪标语
2014/06/13 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
关于学习的决心书
2015/02/05 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
民事上诉状范文
2015/05/22 职场文书
在职证明书模板
2015/06/15 职场文书
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android