基于jquery封装的一个js分页

代码如下:

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

}

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

(0)

相关推荐

  • 把jQuery的类、插件封装成seajs的模块的方法

    注:本文使用的seajs版本是2.1.1一.把Jquery封装成seajs的模块 复制代码 代码如下: define(function () { //这里放置jquery代码 把你喜欢的jquery版本放进来就好了 return $.noConflict();}); 调用方法:这样引进就可以像以前一样使用jquery 复制代码 代码如下: define(function (require, exports, module) {    var $ = require('./js/jquery');

  • 封装属于自己的JS组件

    一.扩展已经存在的组件 1.需求背景 很多时候,我们使用jquery.ajax的方式向后台发送请求,型如 $.ajax({ type: "post", url: "/User/Edit", data: { data: JSON.stringify(postdata) }, success: function (data, status) { if (status == "success") { toastr.success('提交数据成功');

  • 一个封装js代码-----展开收起效果示例

    第一次靠自己完整的封装的小特效,有点小小的兴奋,和大家分享下,希望能对和我一样在探索的童鞋们有点帮助 js部分: 复制代码 代码如下: var show_obj = function(obj,at,ob){ $(obj).bind('click', function(){ var showTxt = $(this).children(at); //alert($(at).html()); //alert(sObj); //alert(); //alert($(this).parent().chi

  • javaScript中封装的各种写法示例(推荐)

    前言 在javascript的世界里,写法是个神奇的现象,真是百家齐开放啊!每次看到老外写的js组件,思想和写法都怪异,就没看到一个js结构基本相同的代码出来.今天,我就来谈谈js写法,我在开发过程中,也写了几种.对于性能方面,如果代码结构或逻辑写的不好,会造成计算机CPU的运算加大,运行性能降低,js的写法对性能的影响也是至关重要的. 通常写js组件开发的,都会用到匿名函数的写法去封装一个对象,与外界形成一个闭包的作用域.(这里对于js的继承,多态,我就不多说了,高级程序员应该具备这些知识,如

  • JS类的封装及实现代码

    1. 定义js类 js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类. 复制代码 代码如下: function ShapeBase() { this.show = function() { alert("ShapeBase show"); }; this.init = function(){ alert("ShapeBase init&q

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

    复制代码 代码如下: (function ($) { var PageFunc = function PageFunc() { } $.PageFunc = function (Total, PageSize, curPageNum, FunUrl) { if (PageSize == "" || PageSize == null || PageSize == undefined) { PageSize = 10; } if (curPageNum == "" ||

  • 基于jQuery封装的分页组件

    由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页效果. 1.page.init.css @charset "utf=8"; *{ box-sizing: border-box; padding: 0; margin: 0; } .page{ font-size: 13px; text-align: right; } .page .page_to

  • jQuery是用来干什么的 jquery其实就是一个js框架

    jQuery 简介 jQuery 库可以通过一行简单的标记被添加到网页中. 您需要具备的基础知识 在您开始学习 jQuery 之前,您应该对以下知识有基本的了解: HTML CSS JavaScript 如果您需要首先学习这些科目,请在我们的 首页 查找这些教程. 什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多"的JavaScript库. 我们小编补充: 优点: 相比于原生的js代码,用很少的代码就可以实现很强大的功

  • 基于jquery实现表格无刷新分页

    本文实例讲解了基于jquery实现表格无刷新分页功能,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <title>面向对象的无刷新表格分页</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <link rel="stylesheet" hre

  • 非常不错的一个JS分页效果代码,值得研究

    本来想用网上找来的分页程序,不过都得做修改,感觉麻烦了,还是自己写一个好了,以后自己用的时候修改就方便了~~大家都多动手,自己写的才是最好的,日后想干什么的,做修改也是很容易的~~顺便也扩充一下自己的代码库~~ 补充一句,cpage是页面计数,应为全局变量,这样可以随处调用它,totalpage是总页数 JS静态分页程序 a:link,a:visited,a:hover,.current,#info{ border:1px solid #DDD; background:#F2F2F2; disp

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

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

  • 基于Jquery实现的一个图片滚动切换

    首先还是要引用jquery框架的. 然后开始HTML代码: 复制代码 代码如下: <div id="New_zlMimgMv"> <div class="imgMvBox"> <ul id="imgMvCon"> <li><a href="#" title=""><img src="New_zlimgMv.jpg" alt

  • 基于jQuery的实现简单的分页控件

    1:效果图 2:素材 3:编码 3.1思考 需要做什么? 1:分页控件需要向后台发送请求,发送的参数包括当前页,每页显示数量,查询条件:并且获取数据加载到当前页面: 2:进行修改删除操作的时候能记住当前页: 3:查询后翻页的时候可以可以记住当前查询的条件 3.2实现 HTML 复制代码 代码如下: <!--存储数据的容器--> <div class="tableData"> </div> <!--分页控件显示--> <div cla

  • 基于jquery创建的一个图片、视频缓冲的效果样式插件

    复制代码 代码如下: (function($) { $.fn.scrollWait = function(options) { var ops = $.extend({}, $.fn.scrollWait.defaults, options); var opts = $.meta ? $.extend({}, ops, $(this).data()) : ops; /** * 显示位置 */ var win = $(window); var winheight = win.height(); v

  • 基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)

    1. 数据 一共包含了全国3049所大学, 从人人网拷贝的 (仅供学习交流, 请勿用于商业项目), 这是一个脚本文件, 里含的JSON对象存储了学校的信息, 格式为: 复制代码 代码如下: var schoolList=[ { "id":1, //省份id "school": [ { "id": 1001, //学校id "name": "\u6e05\u534e\u5927\u5b66" //学校名称 }

随机推荐