Jquery 分页

分页：可以说是所有做程序的开发者的必须会的，分页有很多种，当然最终还是以业务为需求取决于哪一种方法，下面我介绍的是 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:[email protected]

Jquery 分页,布布扣,bubuko.com