首页 > 代码库 > Jquery 分页

Jquery 分页

2024-07-08 16:55:09   221人阅读

分页：可以说是所有做程序的开发者的必须会的，分页有很多种，当然最终还是以业务为需求取决于哪一种方法，下面我介绍的是 SQL语句结合Jquery做的一个Jquery的分页插件，通过个人三年的经验总结的一下东西，不知道是否好用、适用性如何，不过我是用顺手了，如果你觉得好用，谢谢分享下，不好用或者您有什么改进的方法，留言,谢谢知道，不多说

 

JS做分页首先你得了解下闭包的概念(我在这里也说清楚，自己度娘下)

 分页参数：当前页(_PageIndex) 、显示条数(_PageSize)、总条数(_PageCount)

                      数据集显示的对象 $shouCount、链接 _url等参数

  1 /// <reference path="../Scripts/jquery-1.10.1.min.js" />  2   3 //插件  4   5 window.Comm_Page = (function () {  6   7     var _url, _count, _pageIndex , _pageSize;  8   9     var $shouCount; 10  11 var $wrap; 12  13 //这里Get可以随意换成异步请求的方法$.post $.getJson等方法 14  15 //这个方法主要是做请求获取数据集 16  17     var loadPage = function () { 18  19         $.get(_url, { pi: _pageIndex, ps: _pageSize }, function (data) { 20  21             var j = eval("(" + data + ")") 22  23             var html = GetHtml(j[0].data); 24  25             $wrap.append(html); 26  27             var count = j[0].pc; 28  29             $shouCount.html(count); 30  31             Comm_Page.setCount(count); 32  33         }); 34  35 } 36  37 //这个方法主要是做数据格式化(格式化HTML) 38  39 //后面会优化出来自定义的格式 40  41     function GetHtml(d) { 42  43         var html = "</br>"; 44  45         $.each(d, function (i, o) {///GoodsDetail.aspx?gid= 46  47             html += "<li><a href=http://www.mamicode.com/‘/GoodsDetail.aspx?gid" + o.GoodsID + "‘ target=‘_blank‘>" + o.GoodsName + "</li>"; 48  49         }); 50  51         for (var i = 0; i < 20; i++) { 52  53             html += "</br>"; 54  55         } 56  57         return html; 58  59 } 60  61 //滚动条事件，这里给的是当前滚动条距离最下面20px时_pageIndex+1也就是分页 62  63     $(window).scroll(function () { 64  65         console.log("_count:" + _count + "_pagesize:" + _pageSize + "_pageindex:" + _pageIndex); 66  67         console.log(Math.ceil((_count / _pageSize)) > _pageIndex) 68  69         if ($(document).height() - $(this).scrollTop() - $(this).height() < 20) { 70  71             if (Math.ceil((_count / _pageSize)) > _pageIndex) { 72  73                 _pageIndex = _pageIndex + 1; 74  75                 loadPage(); 76  77             } 78  79         } 80  81 }); 82  83   84  85 return { 86  87 //入口，初始化值 88  89         setPram: function (v, z, u, scount) { 90  91             //_count = c; 92  93             $wrap = v; 94  95             _pageSize = z; 96  97             _url = u; 98  99 　　　　_pageIndex = 1100 101             $shouCount = scount;102 103             $wrap.html("");104 105             loadPage();106 107         },108 109                    //设置分页总数110 111         setCount: function (c) {112 113             _count = c;114 115         }116 117     }118 119 } ());
View Code

 

　　

 

 

//调用

 

1 var $war = $(".shoudata");2 3     var $scount = $("#Content_lb")4 5     var url = "/Handler.ashx?" + GetSearcheStr(‘asc‘, 3);6 7     var ps = 8;8 9 window.Comm_Page.setPram($war, ps, url, $scount);

 

 

//返回数据集格式

 1 t_pro_GoodsDAL tpgdal = new t_pro_GoodsDAL(); 2  3 int PageCount = 0; 4  5 var lidt = tpgdal.GetGoods(out PageCount, cid, sparam, "", "", SortDirection, OrderName, pi, ps); 6  7 string json = JsonConvert.SerializeObject(lidt); 8  9 //这个地方和前台约定的返回字符串，酌情定义，总之代码是死的方法是活10 11 json = "[{pc:" + PageCount + ",data:" + json + "}]";12 13 HttpContext.Current.Response.Write(json);

 

 

//方法说明

1、 初始化方法、插件入口

Windows.Comm_page. setPram(数据呈现对象，显示数量，请求的链接，总数呈现对象)

 1 setPram: function (v, z, u, scount) { 2  3             $wrap = v; 4  5             _pageSize = z; 6  7             _url = u; 8  9 　　　　     _pageIndex = 110 11             $shouCount = scount;12 13              //清空数据呈现对象，原因首次加载的时候需要把清空(在选项卡异步请求时14 15             //最明显)，酌情处理16 17             $wrap.html("");18 19                             //参数准备好了，调用获取数据方法(异步请求方法)20 21             loadPage();22 23         }

 

 

2、 设置总数方法

 1 setCount: function (c) { 2 3 _count = c; 4 5 } 

 

不多说这个方法主要做设置分页总数量的

3、 异步请求方法

 1 var loadPage = function () { 2  3                    //这里的参数注意修改与你的后台参数名一直 4  5         $.get(_url, { pi: _pageIndex, ps: _pageSize }, function (data) { 6  7                             //返回的数据集转换Json格式 8  9             var j = eval("(" + data + ")")10 11                             //数据格式化(格式化自己需要HMLT格式)12 13             var html = GetHtml(j[0].data);14 15                             //追加到对象最后16 17             $wrap.append(html);18 19                             //因为查询的条件变化所以，分页的总数也在变化，所有这里我20 21                             //处理的方式从后台拼接的一个json数据22 23             var count = j[0].pc;24 25                             //显示总数26 27             $shouCount.html(count);28 29                             //设置总数30 31             Comm_Page.setCount(count);32 33         });34 35 }

 

        

4、 数据格式化 方法

不用多解释这个方法 ,这个地方想定义到调用自定义方法需要做调整(后续会更新)

 1 function GetHtml(d) { 2  3         var html = "</br>"; 4  5         $.each(d, function (i, o) { 6  7             html += "<li><a href=http://www.mamicode.com/‘ ‘ target=‘_blank‘>" + o.GoodsName + "</li>"; 8  9         });10 11         for (var i = 0; i < 20; i++) {12 13             html += "</br>";14 15         }16 17         return html;18 19     }

 

5、 事件触发 方法

这是滚动条监控事件(qq空间里面那种瀑布流试加载数据)

$(window).scroll(function () {        if ($(document).height() - $(this).scrollTop() - $(this).height() < 20) {                            //Math.ceil  如：1.2 这个取值是2 ，明白？            if (Math.ceil((_count / _pageSize)) > _pageIndex) {                _pageIndex = _pageIndex + 1;                loadPage();            }        }    });

 

 

 

 

 

如果你有什么更好或写得不对的地方谢谢指出和帮助!!! 谢谢！！！共同进步

Email:gametheworld@126.com

 

 

 

 

 

 

 

 

 


联系
我们