在前端执行分页的最佳方式

我有一张表格，其中包含30-60行的数据。我想在前面对此进行分页。基本上是这样的：在前端执行分页的最佳方式

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

jQuery将是我相信这个武器。任何好的教程/建议如何做到这一点？怎么记得等

来源

2011-03-17 samuelvonbonn

如果你想要做的客户端上的一切，这个插件应该做的伎俩非常好：http://tablesorter.com

来源

2011-03-17 22:54:38 bluefoot

没有，但我不wwant做一个排序，我只想做分页..所以，一些行获得hidded与寻呼USR可以看到它们。 – samuelvonbonn 2011-03-18 06:20:04

我知道。这个插件还分页http://tablesorter.com/docs/example-pager.html – bluefoot 2011-03-18 12:17:19

在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; 
})

希望它可以帮助

来源

2016-10-10 11:50:21

在前端执行分页的最佳方式

回答

相关问题