Jquery 分页

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

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

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

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

/// <reference path="../Scripts/jquery-1.10.1.min.js" />

//插件

window.Comm_Page = (function () {

    var _url, _count, _pageIndex , _pageSize;

    var $shouCount;

var $wrap;

//这里Get可以随意换成异步请求的方法$.post $.getJson等方法

//这个方法主要是做请求获取数据集

    var loadPage = function () {

        $.get(_url, { pi: _pageIndex, ps: _pageSize }, function (data) {

            var j = eval("(" + data + ")")

            var html = GetHtml(j[0].data);

            $wrap.append(html);

            var count = j[0].pc;

            $shouCount.html(count);

            Comm_Page.setCount(count);

        });

}

//这个方法主要是做数据格式化(格式化HTML)

//后面会优化出来自定义的格式

    function GetHtml(d) {

        var html = "</br>";

        $.each(d, function (i, o) {///GoodsDetail.aspx?gid=

            html += "<li><a href='/GoodsDetail.aspx?gid" + o.GoodsID + "' target='_blank'>" + o.GoodsName + "</li>";

        });

        for (var i = 0; i < 20; i++) {

            html += "</br>";

        }

        return html;

}

//滚动条事件，这里给的是当前滚动条距离最下面20px时_pageIndex+1也就是分页

    $(window).scroll(function () {

        console.log("_count:" + _count + "_pagesize:" + _pageSize + "_pageindex:" + _pageIndex);

        console.log(Math.ceil((_count / _pageSize)) > _pageIndex)

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

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

                _pageIndex = _pageIndex + 1;

                loadPage();

            }

        }

});

 

return {

//入口，初始化值

        setPram: function (v, z, u, scount) {

            //_count = c;

            $wrap = v;

            _pageSize = z;

            _url = u;

　　　　_pageIndex = 1

            $shouCount = scount;

            $wrap.html("");

            loadPage();

        },

                   //设置分页总数

        setCount: function (c) {

            _count = c;

        }

    }

} ());

　　

//调用

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