Jquery 分页

2022-09-26 08:25:33

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

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 = 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

Jquery 分页,布布扣,bubuko.com

Jquery 分页

码农公寓

相关文章