分页之辛酸史

分页，老生常谈。

　　曾经自己以为，你写了分页很叼，因为那时我不会写，曾经以为自己会分页就开始变叼，那是因为我不知道什么叫做无刷新分页，曾经用webForm的Ispostback写出了无刷新分页可以装逼了，那是因为我还不懂什么叫做页面周期，曾经自以为用了MVCpager更加叼，那是因为你不知道什么叫做Ajax。

　　曾经过去了，还是得活在当下。

　　一、装逼史

　　首先说下曾经自己以为很装逼的分页。http://www.cnblogs.com/JeffController/p/4026091.html（还是拷贝别人的80%）

　　但是当你用起来的时候，你发现了，每次都要刷新，每次页面数据都不晓得去了哪里，比如查询的条件，于是乎，各种百度，各种google，于是找到了一款叫做iframe的东西，哇塞，太好了，我也可以写无刷新分页了。于是乎，在页面各种嵌套之下，套进去了分页，在模版页里面申明了一个iframe，然后呢，各种js特效又整了一大堆。

　　二、骚情史

　　此后，开始了正式的码农工作，用WebForm做，全部页面用控件 AspNetPager（这款控件很不错），额，在自己很装逼的情况下，觉得干嘛不自己写，于是呢，开始了一个CV大法的分页，在Ispostback的情况下，写上了上一页，下一页，首页，最后一页，利用top（sqlserver ），然后页面上写上 Visable=false，隐藏各种属性，于是乎，自己以为很牛X的分页出现了，实际上，你懂的。。

　　三、微凉史

　　终于，换了一个坑，因为当时觉得技术那家公司用的东西都属于那种不跟着社会进步的那种，你懂的，还是各种浮躁心理，开始了MVC分页模式，瞬间，觉得不会写分页了，oh，mygod，从此不能快乐的装逼了，不开森。于是乎，继续开始百度，google大法，找到了MVCpager（这款控件棒棒的），于是乎，写个list，转成IQueryable，很刁，叼到爆的样子。http://www.cnblogs.com/iamlilinfeng/archive/2013/03/11/2951460.html（参考例子）

　　但是呢，实际还是刷新分页。http://www.cnblogs.com/x-xk/archive/2012/11/23/2783812.html（这是无刷新分页），于是乎，傻傻的，开始了新的征程。

　　项目要升级了，还是出现了问题，而且接近于不治之症（指定的数组必须具有相同的维数），感谢万能的网友，还是找到了MVCPager创始者杨老师（http://www.webdiyer.com/mvcpager/）http://bbs.csdn.net/topics/390421562（解决方案），瞬间杨老师的官网上找到源码，编译，更新引用，于是乎，又可以了，蛋蛋的疼痛呀。

　　貌似就这样了，但是事情又出现了，毕竟人都要成长，于是开始研究源码。虽然之前一直用ajax提交数据，但是呢，还没有整过分页，开始了bootsharp分页，于是乎，找官网文档，Paginator的相关参数。

　　四、上干货

　　　　1、参数

参数名称	数据类型	默认值	简单描述
size	string	normal	设置控件的显示大小，是个字符串. 允许的值:mini,small,normal,large。值：mini版的、小号的、正常的、大号的。
alignment	string	left	设置控件的对齐方式，是个字符串，允许的值：left,center,andright. 即：左对齐、居中对齐、右对齐。
itemContainerClass	function		参数接收一个函数，返回一个字符串，该字符串是一个我们自定义的class类样式。当控件内的每个操纵按钮被渲染(render)时，都会调用该函数，同时把有关该按钮的信息作为参数传入。参数：type,page,?current?。type为该控件的操作按钮的类型，如上图所示的五种类型：first、prev、page、next、last。page为该按钮所属第几页。current指示整个控件的当前页是第几页。
currentPage	number	1	设置当前页。
numberOfPages	number	5	设置控件显示的页码数.即：类型为"page"的操作按钮的数量。
totalPages	number	1	总页数设置。
pageUrl	function		设置超链接的链接地址。该参数是个函数，参数为：type,page,current。（因为每个操作按钮最终会被渲染成超链接）
itemTexts	function		控制每个操作按钮的显示文字。是个函数，有3个参数:type,page,current。通过这个参数我们就可以将操作按钮上的英文改为中文，如first-->首页，last-->尾页。
tooltipTitles	function		设置操作按钮的title属性。是个函数，有3个参数:type,page,current。
useBootstrapTooltip	boolean	false	设置是否使用Bootstrap内置的tooltip。 true是使用，false是不使用,默认是不使用。注意：如果使用，则需要引入bootstrap-tooltip.js插件。
onPageClicked	function		为操作按钮绑定click事件。回调函数的参数：event,originalEvent,type,page。
onPageChanged	function		为操作按钮绑定页码改变事件，回调函数的参数：event,oldPage,newPage。

　　　　2、公共命令

命令	参数	描述
show	page	直接跳转到特定的page，与直接点击操作按钮的效果是一样的。使用方法，如：$('#example').bootstrapPaginator("show",3)，直接跳转到第3页，$('#example').bootstrapPaginator("show",100)直接跳转到100页。
showFirst		直接跳转到首页，与点击first按钮相同。使用方法：$('#example').bootstrapPaginator("showFirst")
showPrevious		直接跳转到上一页。使用方法：$('#example').bootstrapPaginator("showPrevious")
showNext		showNext命令用于直接跳转到下一页。
showLast		showLast命令用于直接跳转到上一页。
getPages		getPages命令用于返回当前控件中显示的页码，以数组形式返回。使用方法：var arra =$('#example').bootstrapPaginator("getPages")
setOptions		重新设置参数，使用方法：$('#example').bootstrapPaginator("setOptions",newoptions)

　　　　具体请参考官网`(*∩_∩*)′

　　五、日狗史

　　世界上最痛苦的事情莫过于一个后台程序员，开始玩前台的css+js（虽然偶尔还玩个数据库撒的），但是，当你谷歌浏览器+firebug终于找到了问题，合着特么的一个css的问题时候，整整三个小时呀，我去你大爷的。

　　提醒大家一下，分页的时候用了某某的框架的时候，发现的一个问题，哪就是分页的时候，他竖着显示了（首次遇到，之前写过的都是正常的，没有问题），结果就是一个class的问题，源码为this.options.bootstrapMajorVersion === 2 ? $("<ul></ul>") ，改起来很简单，就在ul里面添加一个类就可以了，$("<ul></ul>") 改成$("<ul class='pagination'></ul>") ，完美搞定。

　　附源码一份：

<table id="NList" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tbody></tbody>
    </table>
    <div class="col-md-12 text-right"><div id="MyPagination"></div></div>

    <script type="text/javascript">
        $(function () {
            SetTable();
            loadPaginator();
            $("#查询按钮ID").click(function () {
                SetTable();
            });
        });
        var totalCount = 0;
        var IndexPage = 1;
        var PageSize = 5;
　　　　 //查询条件，这里有各种蛋疼的方式，反正就是值传过去就行
        var st = "", et = "", samId = "", dpId = "", taskId = "", detectorId = "", jugdeResults = "";

        var SetTable = function () {
            st = $("#st").val();
            et = $("#et").val();
            samId = $("#SamlId").find("option:selected").val();
            dpId = $("#DPID").find("option:selected").val();
            taskId = $("#TaskId").find("option:selected").val();
            detectorId = $("#DetectorId").find("option:selected").val();
            jugdeResults = $("#JugdeResults").find("option:selected").val();
            $.ajax({
                async: true,
                type: "post",
                url: "请求路径",//url
                data: {
                    PageSize: PageSize, IndexPage: IndexPage, st: st, et: et, samId:samId, dpId:dpId, taskId: taskId, detectorId: detectorId, jugdeResults: jugdeResults
                },
                success: function (data) {
                    if (data.count > 0) {
                        $("#NList tbody").html("");
                        $("#NList tbody").html(data.result);
                        totalCount = data.count;
                        loadPaginator();
                        $('#MyPagination').show();
                    }
                    else {
                        $("#NList tbody").html("<tr><td colspan="2" class="text-center" height="350px;">暂无数据</td></tr>");
                    }
                }
            });
        };

        var loadPaginator = function () {
            var options = {
                currentPage: IndexPage,
                totalPages: Math.ceil(totalCount / PageSize),
                numberOfPages: 5,
                size: 'normal',
                alignment: 'right',
                itemContainerClass: function (type, page, current) {
                    return (page === current) ? "active" : "pointer-cursor";
                },
                onPageClicked: function (e, originalEvent, type, page) {
                    IndexPage = page;
                    PageSize = 5;
                    SetTable();
                }
            }
            $('#MyPagination').bootstrapPaginator(options);
        };
    </script>