Question

已更新

我曾经认为，当我只是尝试使用Elasticsearch和AngularJS过滤简单搜索应用程序的前100个结果（一次10个）时，我的客户端分页将是最好的。从那时起我就完成了很多阅读，似乎很多人都提倡服务器端方法...

所以，如果我在控制器中有这个分页代码

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


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

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

导致＆＃34;无限滚动＆＃34;选项越来越受欢迎。我将如何转换＆＃34;无限滚动到更传统的页面＆＃34;页面＆＃34;分页（如Google和Bing）选项。我尝试过很多东西，但似乎无法让它发挥作用。现在我开始认为它与结果的加载方式有关

if (totalHits > 0) {
      $scope.results.documentCount = totalHits;
      $scope.results.documents.push.apply($scope.results.documents, searchService.formatResults(es_return.hits.hits));...

我试过换掉＆＃34; push.apply＆＃34;对于js中的切片方法，但这不起作用。我甚至拿出了$ scope.resultspage ++; getNextPage（）但也没有效果。

这就是问题所在......如何将此代码转换为＆＃34;传统＆＃34;分页？

旧

我试图在使用Elasticsearch和AngularJS的小型搜索应用上进行分页。无论如何，还要使用AngularJS UI Bootstrap进行分页。

我已经阅读了这个popular thread并且几乎已经有了它，但它不起作用，我似乎无法找出原因。具体来说，分页会显示，但点击按钮不会做任何事情（它不会过滤到下一组结果）。

我将前1000个结果加载到用户界面，然后尝试过滤这些结果。

我的HTML div是：

<uib-pagination class="pagination" ng-if="results.documentCount > 10" ng-model="currentPage" max-size="maxSize" total-items="results.documentCount" items-per-page="itemsPerPage" direction-links="true">

我的ng-repeat结果列表如下：

<li ng-repeat="page in results.documents">
    <a href="{{page.url}}"><span ng-bind-html="page.title"></span></a><br />
    <span ng-bind-html="page.url"></span>
    <p ng-bind-html="page.content"></p>
  </li>

我的分页是：

$scope.currentPage = 1;
  $scope.itemsPerPage = 10;
  $scope.totalItems = 1000;
  $scope.noOfPages = Math.ceil(($scope.totalItems / $scope.itemsPerPage) / 10);
  $scope.maxSize = $scope.noOfPages;
  $scope.paginationList = [];

    $scope.$watch("currentPage + itemsPerPage", updatePagination);

  makePagination();

  ////

   var updatePagination = function() {
    var begin = (($scope.currentPage -1) * $scope.itemsPerPage),
      end = begin + $scope.itemsPerPage;

      $scope.results.documents = $scope.paginationList.slice(begin, end);
  };

  var makePagination = function() {
    var i;
    var page = $scope.results.documents;
    $scope.paginationList = [];
    for (i=1; i <= 1000; i++) {
      $scope.paginationList.push(i)
    }
  };

我很确定它与$scope.paginationList.push(i)部分有关，因为我不太确定要放在那里因为我的ng-repeat是如何，它比答案中给出了另一个例子。

Answer 1

我认为这是因为makePagination（）和updatePagination（）没有在你第一次调用它们的地方定义。您可以将函数定义移到上面调用它的位置，也可以使用像这样的命名函数

function makePagination() {
...
}

请参阅App-loading refactor

客户端与AngularJS的分页

1 个答案: