在前端執行分頁的最佳方式

Question

我有一張表格，其中包含30-60行的數據。我想在前面對此進行分頁。基本上是這樣的：

First 1 2 3 4(<current) 5 6 .. 15(<last page) Last 

jQuery將是我相信這個武器。任何好的教程/建議如何做到這一點？怎麼記得等

Answer 1

如果你想要做的客戶端上的一切，這個插件應該做的伎倆非常好：http://tablesorter.com

Answer 2

在angularJs，正如我們在苦苦技術做就可以按照這個方法，

假設您需要使用UI選擇指令來顯示它們的3000-4000個實體。通常如果您在選擇框或UI中綁定了超過500個條目 - 如果您單擊選擇框或UI選擇，網站將會被拖拽一段時間，那麼如何解決此問題？ 中序給你解決這個問題有兩點： - 該警報控制器，用戶已達到列表的底部

在分頁UI選擇 1. limitTo過濾 2.指令

<ui-select ng-model="education.clg" name="clg" theme="select2" append-to-body="true" sortable="true" > 
        <ui-select-match placeholder="Select institution/university">{{$select.selected.name}}</ui-select-match> 
         <ui-select-choices repeat="college in colleges | propsFilter: {name: $select.search} > 
           <div ng-bind-html="college.name | highlight: $select.search"></div> 
        </ui-select-choices> 
     </ui-select> 

現在添加limitTo在 「UI的選擇 - 選擇」 過濾器

現在創建一個指令，確定用戶已經到達列表的下方。

angular.module('app',[]).directive('scrollDetector', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var raw = element[0]; 
      element.bind('scroll', function() { 
       if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) { 
        console.log("end of list"); 
        scope.$apply(attrs.scrollDetector); 
       } 
      }); 
     } 
    }; 
}); 

讓我們在ui-select中使用上面的指令。添加渦旋檢測器= loadMore（）在指令

<ui-select-choices repeat="college in colleges | propsFilter: {name: $select.search} > 
      <div ng-bind-html="college.name | highlight: $select.search" | limitTo:currentElement" scroll-detector="loadMore()">  </div> 
     </ui-select-choices> 

現在，在控制器初始化currentElement $ scope.currentElement = 20; 添加loadMore（）函數在同一控制器

$scope.loadMore=function(){ 
    console.log("loadMore"); 
    $scope.currentElement=$scope.currentElement+20; 
} 

這將通過20遞增列表的用戶到達底部時。如果你想重新設置currrent元素回到20如果用戶點擊邊ui-select只需使用下面的行重置它。

var myDiv=angular.element(document.querySelector('#myDiv')); 
myDiv.click(function(){ 
    // reset back to 20 
    $scope.currentElement=20; 
}) 

希望它可以幫助