Jquery 分页

2020-12-13 14:36

阅读：316

标签：style blog http color get strong

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

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

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

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

  1 /// 
  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 = "";
 44 
 45         $.each(d, function (i, o) {///GoodsDetail.aspx?gid=
 46 
 47             html += "

" + o.GoodsName + "

"; 48 49 }); 50 51 for (var i = 0; i ) { 52 53 html += ""; 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() ) { 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 = "";
 4 
 5         $.each(d, function (i, o) {
 6 
 7             html += "" + o.GoodsName + "
";
 8 
 9         });
10 
11         for (var i = 0; i ) {
12 
13             html += "";
14 
15         }
16 
17         return html;
18 
19     }

5、 事件触发 方法

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

$(window).scroll(function () {

        if ($(document).height() - $(this).scrollTop() - $(this).height() ) {

                            //Math.ceil  如：1.2 这个取值是2 ，明白？

            if (Math.ceil((_count / _pageSize)) > _pageIndex) {

                _pageIndex = _pageIndex + 1;

                loadPage();

            }

        }

    });

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

Email:gametheworld@126.com

Jquery 分页,搜素材,soscw.com

Jquery 分页

标签：style blog http color get strong

原文地址：http://www.cnblogs.com/nimeide/p/3794351.html

上一篇：WPF自定义控件Textbox 带水印以及错误信息显示_02

下一篇：EPLAN Electric P8 2.0即将到来,着实令人期待-转caodaping

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：Jquery 分页
文章链接：http://soscw.com/essay/34238.html

亲，登录后才可以留言！

Jquery 分页

评论

热门文章

推荐文章

最新文章

置顶文章