将无限滚动分页更改为逐页分页答案

【问题标题】：Changing infinite scroll pagination to page by page pagination将无限滚动分页更改为逐页分页
【发布时间】：2023-03-12 14:30:02
【问题描述】：

我目前使用 Elasticsearch 和 AngularJS 搜索应用程序进行无限滚动分页。我正在尝试更改“常规”分页（例如 Google 或 Bing 搜索引擎）。我正在尝试使用 AngularJS UI Bootstrap Pagination，但似乎无法使其正常工作。它显示正确，但单击操作不起作用 - 不会加载下一组结果。

这是 AngularJS UI Bootstrap 分页指令的 HTML：

<uib-pagination class="pagination" ng-model="currentPage" ng-change="getNextPage(currentPage)" ng-click="getNextPage()" ng-if="canGetNextPage" total-items="totalItems" max-size="noOfPages" direction-links="true" items-per-page="itemsPerPage">

这里是无限滚动的相关JS代码：

$scope.getNextPage = function() {
  $scope.resultsPage++;
  getResults();

};

还有 $watchGroup：

    $scope.$watchGroup(['results', 'noResults', 'isSearching', 'totalItems', 'currentPage + itemsPerPage'], function() { 
    var totalItems = $scope.results.documentCount;

    if (!totalItems || totalItems <= $scope.results.documents.length || $scope.noResults || $scope.isSearching) {
      $scope.canGetNextPage = false;
    } 
    else {
      $scope.canGetNextPage = true;
    }
  });

我已经尝试过很多教程（here）和here 以及这个SO question，但无论如何，我无法让点击操作起作用。我通常将点击操作代码放在 getNextPage 函数中，而留下其他代码，因为 Bootstrap 分页指令应该会处理这个问题。

我也在研究this pagination directive，但不确定这是否是更好的解决方案。

我想做客户端分页与服务器端，我只加载前 1000 个 json 结果，所以应该没问题。

对点击操作的任何帮助，或者我不知道的更好的解决方案都会很棒！

【问题讨论】：

您真的只是因为没有足够快的得到答案而删除了您的问题内容吗？是的，如果您需要尽快得到答案，那将无济于事，但人们会在提出解决方案数月后遇到问题。
@ste2425 与速度无关。我之前会删除这个问题，但它已经通过一个我以前见过的项目的链接得到了回答。事实上，我之前已经多次看到与同一个问题相关的链接 - 试图对我的问题得到不同的答案

标签： angularjs elasticsearch pagination

【解决方案1】：

有一个项目叫ElasticUI，它是一组可以帮助你的AngularJS指令，尤其是在寻呼派对中

【讨论】：

感谢您的链接，我以前看过那个项目，当时我决定不使用它

【解决方案2】：

更改无限滚动需要用循环结构替换 if 语句

【讨论】：