在前端进行分页的最佳方法答案

【问题标题】：Best way to do a pagination on front end在前端进行分页的最佳方法
【发布时间】：2022-03-11 18:02:05
【问题描述】：

我有一个包含 30-60 行数据的表。我想在前端对此进行分页。基本上是这样的：

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

我相信 jQuery 将是这方面的武器。任何好的教程/建议如何做到这一点？要记住什么等。

【问题讨论】：

标签： pagination paging jquery-pagination data-paging

【解决方案1】：

如果你想在客户端做所有事情，这个插件应该可以很好地解决问题：http://tablesorter.com

【讨论】：

不，但我不想进行排序，我只想进行分页.. 这样一些行会被隐藏，并且通过分页 usr 可以看到它们。
我知道。这个插件还分页tablesorter.com/docs/example-pager.html

【解决方案2】：

在 angularJs 中，您可以像我们在 Oodles Technologies 中一样采用这种方法，

假设它们是您需要使用 UI-select 指令显示的 3000-4000 个实体。通常如果在选择框或UI-select中绑定超过500个条目，点击选择框或UI-select时网站会卡住一段时间，那么如何解决这个问题？为了解决这个问题，你要做两件事：- 1.limitTo过滤 2. 警告控制器用户已到达列表底部的指令

UI 中的分页选择

<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>

现在在“ui-select-choices”中添加limitTo过滤器

现在创建一个指令来确定用户已经到达列表的下方。

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 中使用上述指令。在指令中添加 scroll-detector=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。如果您想将当前元素重置回 20，如果用户单击侧 ui-select 只需使用下面的行将其重置。

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

希望对你有帮助

【讨论】：