标签：style blog http color get strong
分页：可以说是所有做程序的开发者的必须会的，分页有很多种，当然最终还是以业务为需求取决于哪一种方法，下面我介绍的是 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=‘/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 = 1 100 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 } ());
//调用
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 = 1
10
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=‘ ‘ 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
标签：style blog http color get strong
原文地址：http://www.cnblogs.com/nimeide/p/3794351.html
