情景：千里碼有些最優化題目的旁邊會有一個排行榜，用來展示不同的答案。比如[Uber打車匹配](http://www.qlcoder.com/task/7596)

這裡的答題人數並不多，但是[老王裝貨](http://www.qlcoder.com/task/7566)就爆炸了，80多個 頁面拉下去都好長一段，於是給排行榜加了個分頁功能。但是出於這塊的html結構實在那啥（某人躺槍），用請求的話程式碼確實可以實現，但是出於偷懶，想出了另外一個法子，不過這種法子適用於資料量不是很大的情況下。

分頁外掛使用的是jq的simplePagination,
DOM結構如下：
`<div class="well" style="width:415px;"><h4>uber車輛匹配排行榜</h4>        
    <div style="height:400px;overflow:hidden;"> <!--  容器高度-->
    <div class="row">

    <div class="col-md-1">
    1
    </div>
    <div class="col-md-5">
    端著木魚敲程式碼
    </div>
    <div class="col-md-6">
 

4991kg

    <div class="col-md-1">
    2
    </div>
    <div class="col-md-5">
    xxmodd
    </div>
    <div class="col-md-6">

4991kg
`


在外面加了一層容器，設死高度（具體高度跟句實際需求設），overflow：hidden;這裡資料只放了幾條，實際是所以資料一開始就載入了的。

JS程式碼如下：

$("#fenye").pagination({
                prevText:"上一頁",
                nextText:"下一頁",
                ulClass:"in clearfix",
                items: 1000,//--總個數
                itemsOnPage: 20,//--每頁個數
                currentPage:1,//-當前
                //hrefTextSuffix:"javascript:;",
                hrefText:""
 
,
                onPageClick:function(pageNumber, event){
                    console.log(pageNumber);
                    $(".well .row").removeAttr("style");
                    $(".well .row").slice(0,(pageNumber-1)*20).css({"height":"0","overflow":"hidden"});
                }
            });

這裡設定了每頁個數20個，原理就是，當你點選某一頁的時候，只需要把前面(pageNumber-1)*20的資料全部隱藏就好了。
主要函式就是slice(start,end);
比如slice(2,7)其中2，7是索引值，包含2但不包含7

當然資料量較少的情況下可以玩玩，資料量大的慎重。。