基于jquery封装的一个js分页


Posted in Javascript onNovember 15, 2011
(function ($) { 
var PageFunc = function PageFunc() { } 
$.PageFunc = function (Total, PageSize, curPageNum, FunUrl) { 
if (PageSize == "" || PageSize == null || PageSize == undefined) { 
PageSize = 10; 
} 
if (curPageNum == "" || curPageNum == null || curPageNum == undefined) { 
curPageNum = 1; 
} 
//计算总页数 
Total = parseInt(Total); //总记录数 
PageSize = parseInt(PageSize); //每页显示数 
curPageNum = parseInt(curPageNum); //当前页 
//总页数 
var AllPage = Math.floor(Total / PageSize); 
if (Total % PageSize != 0) { 
AllPage++; 
} var navHtml = ""; 
if (curPageNum <= 0) 
curPageNum = 1; 
if (AllPage > 1) { 
if (curPageNum != 1) { 
//处理首页连接 
navHtml += "<span><a href=\"javascript:" + FunUrl + "('1')\" >|<</a></span>  "; 
} 
if (curPageNum > 1) { 
//处理上一页的连接 
navHtml += "<span><a href=\"javascript:" + FunUrl + "('" + (curPageNum - 1) + "')\" ><<</a></span>  "; 
} 
else { 
navHtml += "<span class=\"disabled\"><<</span>  "; 
} 
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 += "<span lass=\"current\">[" + curPageNum + "]</span>  "; 
} 
else { 
//一般页处理 
var n = curPageNum + i - currint; 
navHtml += "<a href=\"javascript:" + FunUrl + "('" + (parseInt(n)) + "')\">" + n + "</a>  "; 
} 
} 
if (curPageNum < AllPage) { 
//处理下一页的链接 
navHtml += "<span><a href=\"javascript:" + FunUrl + "('" + (parseInt(curPageNum) + 1) + "')\">>></a></span>  "; 
} 
else { 
navHtml += "<span class=\"disabled\">>></span>  "; 
} 
if (curPageNum != AllPage) { 
navHtml += "<span><a href=\"javascript:" + FunUrl + "('" + AllPage + "')\" >>|</a></span>  "; 
} 
} 
navHtml += "<span>[" + curPageNum + "/" + AllPage + "]</span>  "; 
return navHtml; 
}; 
})(jQuery);

下边是调用方法:
function QueryList(curpage) { 
if (curpage == "" || curpage == null || curpage == undefined) { 
curpage = 1; 
} 
var pagesize = 10; var Countys = $("#Countys").val(); //县 
var enddate = $("#enddate").val(); //结束时间 
var begindate = $("#begindate").val(); //开始时间 
$.ajax({ 
url: "", 
type: "POST", 
data: { "Countys": Countys, "enddate": enddate, "begindate": begindate, "curpage": curpage, "pagesize": pagesize }, 
dataType: "json", 
error: function (xhr, status, errMsg) { window.location.href = "/CommonError/index/" + errMsg.code + "?txt=" + errMsg.msg; }, 
success: function (mydata) { 
var str = ""; 
$.each(mydata.Tdata, function (i, item) { 
str += "<tr>" 
str += "<td>" + $.FormatDateTime(item.ControlBeginTime, false) + "</td>"; 
str += "<td>" + $.FormatDateTime(item.ControlEndTime, false) + "</td>"; 
str += "<td>" + item.Name + "</td>"; 
str += "<td>" + item.PlateNumber + "</td>"; 
str += "<td>" + item.ControlDept + "</td>"; 
if (item.IsAll == "0") { 
str += "<td>全县布控</td>"; 
} 
else { 
str += "<td>按卡口点布控</td>"; 
} 
str += "<td>" + item.IsAll == "0" ? "全县布控" : "按卡口点布控" + "</td>"; 
str += "<td>修改</td>"; 
str += "<td>删除</td>"; 
str += "<td>详细</td>"; 
str + "</tr>"; 
}); 
$("#srh_rslt tbody").html(str); 
$(".pagination").html($.PageFunc(mydata.total, pagesize, curpage, "QueryList")); 
} 
}); 
}
Javascript 相关文章推荐
JavaScript中Math对象使用说明
Jan 16 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
js 利用className得到对象的实现代码
Nov 15 #Javascript
基于jquery的web页面日期格式化插件
Nov 15 #Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 #Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 #Javascript
读JavaScript DOM编程艺术笔记
Nov 15 #Javascript
js constructor的实际作用分析
Nov 15 #Javascript
浅谈Javascript面向对象编程
Nov 15 #Javascript
You might like
php中生成随机密码的自定义函数代码
2013/10/21 PHP
js 处理数组重复元素示例代码
2013/12/27 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
Vue自定义指令详解
2017/07/28 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python修改注册表终止360进程实例
2014/10/13 Python
python如何实现单链表的反转
2020/02/10 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
Python map及filter函数使用方法解析
2020/08/06 Python
Python如何实现远程方法调用
2020/08/07 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
给领导的致歉信范文
2014/01/13 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
美术教学感言
2014/02/22 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
公司节能减排方案
2014/05/16 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
2015年小学开学寄语
2015/02/27 职场文书
公司财务管理制度
2015/08/04 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js
JS封装cavans多种滤镜组件
2022/02/15 Javascript