分頁之辛酸史

分頁，老生常談。

　　曾經自己以為，你寫了分頁很叼，因為那時我不會寫，曾經以為自己會分頁就開始變叼，那是因為我不知道什么叫做無刷新分頁，曾經用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>