基于jquery封装的一个js分页_jquery

复制代码 代码如下:

(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"));
}
});
}

时间: 2024-12-21 04:18:59

基于jquery封装的一个js分页_jquery的相关文章

基于jquery的tab切换 js原理_jquery

html代码: 复制代码 代码如下: <div class="details"> <ul class="tab"><li class="on" rel="a1"><b>个人资料</b></li><li rel="a2"><b>帐号维护</b></li><li rel="a3

html5-JS,jQuery代码 封装到一个JS文件的问题

问题描述 JS,jQuery代码 封装到一个JS文件的问题 $(document).ready(function(){ $(".liren_content:odd").css("float",'right'); $('.mall_list').find('ul li:nth-child(3)').css('border','0'); var count=0; $(".jiaru").click(function () { // alert(111

jQuery 如何实现一个滑动按钮开关_jquery

滑动开关按钮大家在各大网站都能见到,下面小编给大家分享一篇基于jquery实现的一个滑动按钮开关效果,感兴趣的朋友可以参考下实现代码. 先给大家展示下效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery做的滑动按钮开关</title> <link rel="sty

基于Jquery+Ajax+Json的高效分页实现代码_jquery

如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题,欢迎随时联系我, 同时也欢迎高手多给点意见,我不建议在喷子中成长. 本人QQ:364175837 前言 相信很多朋友都用过,Jquery的分页插件,我之前就用的jquery.paper这个,如果有兴趣可以留下QQ,我发份简单的实例源码给您. 该代码是晚上匆忙中完成的,所以没怎么优化,但是主要作为实例来结合这些知识的一个综合运用.好了废话不多说,直接上代码. vs2010+sql2005expre

Hallo.js基于jQuery UI所见即所得的Web编辑器_jquery

先看看效果: Hallo.js是一个简单的富文本Web编辑器,基于jQuery UI并且利用HTML5的contentEditable实现所见即所得.其目标并不是取代当今非常流行的编辑器,如 TinyMCE 或 Aloha Editor,而是给开发者提供一种更简单.更愉快的用户编辑体验. Hallo.js是由Henri Bergius为IKS项目开发的一款免费软件,使用CoffeeScript开发,遵循MIT许可协议,托管在GitHub上. 使用方法 1.你需要将jQuery.jQuery UI

基于JQuery的密码强度验证代码_jquery

    因为是基于JQuery的控件,当然需要JQuery库,还要一个本控件的JS.JQuery的JS大家可以到官网下载:http://code.jquery.com/jquery-1.4.2.min.js 这个控件的JS文件:password_strength_plugin.js password_strength_plugin.js 复制代码 代码如下: (function($){ $.fn.shortPass = 'Too short'; $.fn.badPass = 'Weak'; $.

基于jquery的loading效果实现代码_jquery

在代码<head></head>里加入以下代码: <script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(window).load(function(){$("#loading").hide();})</script> 在里<bo

基于jQuery实现的QQ表情插件_jquery

不废话了,先给大家展示效果图: 查看演示 下载源码 我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您可以轻松将其应用到你的项目中. HTML 首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件. <script type="text/javascript" src="j

基于JQuery的多标签实现代码_jquery

今天要分享的是基于JQuery实现的多标签的切换,JQuery就不用过多介绍了,网上一搜一大堆资料,当然这样的小示例也有很多,这里只是发表一些自己的想法. 下面是本次示例所使用的HTML页面: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://ww