分頁的另一種實現-不用額外請求
阿新 • • 發佈:2019-01-09
情景:千里碼有些最優化題目的旁邊會有一個排行榜,用來展示不同的答案。比如[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
當然資料量較少的情況下可以玩玩,資料量大的慎重。。