个人中心
gpt4 book ai didi

javascript - 使用 Angular 和分页从数组中获取下一组和上一组记录

转载 作者：太空宇宙 更新时间：2023-11-04 16:00:45 26 4
gpt4 key购买 nike

我想出了this plunker显示我的问题。

我正在寻找的行为是，当用户单击右箭头时，它会转到下一页，而左箭头则会转到上一页。如果用户位于第 10 页，则当单击右箭头时，分页链接上显示的页数会更改为 2-11，并且 11 会突出显示。

如果他们再次单击右箭头，分页链接上显示的页数将从 3 更改为 12，并且 12 会突出显示。这种情况会一直持续到第 20 页，然后就不允许他们再继续了。如果用户在第 1 页上单击向左箭头没有效果，也应该通过递减沿之前的方向工作。希望这一点是清楚的。

HTML:

<ul class="pagination pagination-lg">
      <li class="page-item">
        <a href="#" ng-click="search($index-1)"> <span aria-hidden="true">&laquo;</span> <span class="sr-only">Previous</span> </a>
      </li>
      <li ng-class="currentPage === $index+1 ? 'active' : ''" ng-repeat="i in getNumber(numberOfPages) track by $index"><a class="page-link" href="#" ng-click="search($index+1)">{{$index+1}}</a></li>
      <li class="page-item">
        <a href="#" ng-click="search($index+1)"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span> </a>
      </li>
    </ul>

Angular/JS:

$scope.search = function(index){
      $scope.currentPage = index;

      $http.get('https://jsonplaceholder.typicode.com/todos').then(function (response) {
        var temp = response.data; 
        $scope.data = temp.splice(pageSize * (index-1), 10);
      })
    }

参见this plunker获取完整代码。任何帮助表示赞赏。

最佳答案

因此，我可能的解决方案的主要思想是使用页码创建一个数组，而不是尝试跟踪数组索引。因为这个想法，我做了一些改变。
这是解决方案:https://plnkr.co/edit/d1JhJDNskNEMh0G59b9K?p=preview

主页逻辑发生在getNumber()

$scope.getNumber = function() {

  //Add elements when increasing currentPage
  for (var i = 0; i < $scope.currentPage - $scope.pages[$scope.pages.length - 1]; i++) {
    $scope.pages.shift();
    $scope.pages.push($scope.currentPage);
  }

  //Add elements when decreasing currentPage
  for (var i = 0; i < $scope.pages[0] - $scope.currentPage; i++) {
    $scope.pages.pop();
    $scope.pages.unshift($scope.currentPage);
  }

  return $scope.pages;
}

此方法跟踪带有页码的数组，如果 currentPage 大于数组中的最后一个页码，则添加页码，反之亦然。你的问题只是一个逻辑问题。

我已经添加了下面的所有代码，因此不需要 plunker。

首先是 JavaScript，然后是 HTML

(function () {

    var app = angular.module('app', []);

}());

(function(module) {

  var demoController = function($http, $scope) {

    $http.get('https://jsonplaceholder.typicode.com/todos').then(function(response) {
      $scope.data = response.data;
    })

    var pageSize = 10;
    var totalItems = 200;

    $scope.numberOfPages = totalItems / pageSize;
    $scope.currentPage = 0;
    $scope.pages = new Array(pageSize);
    for (var i = 1; i <= pageSize; i++) {
      $scope.pages[i - 1] = i;
    }


    $scope.getNumber = function() {

      //Add elements when increasing currentPage
      for (var i = 0; i < $scope.currentPage - $scope.pages[$scope.pages.length - 1]; i++) {
        $scope.pages.shift();
        $scope.pages.push($scope.currentPage);
      }

      //Add elements when decreasing currentPage
      for (var i = 0; i < $scope.pages[0] - $scope.currentPage; i++) {
        $scope.pages.pop();
        $scope.pages.unshift($scope.currentPage);
      }

      return $scope.pages;
    }

    $scope.search = function(index) {
      if (index <= 0 || index > totalItems / pageSize) return;
      $scope.currentPage = index;

      $http.get('https://jsonplaceholder.typicode.com/todos').then(function(response) {
        var temp = response.data;
        $scope.data = temp.splice(pageSize * (index - 1), 10);
      })

    }

  };

  module.controller("demoController", demoController);

}(angular.module("app")));
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <script src="ctrl.js"></script>
  </head>

  <body ng-app="app">
    <div class="container">
      <h1>Hello Plunker!</h1>
      
      <div ng-controller="demoController" ng-init="search(1)">
        
        <div ng-repeat="item in data">
          <div>{{item.id}} {{item.title}}</div>
        </div>
        
        <ul class="pagination pagination-lg">
          <li class="page-item">
            <a href="#" ng-click="search(currentPage-1)"> <span aria-hidden="true">&laquo;</span> <span class="sr-only">Previous</span> </a>
          </li>
          <li ng-class="currentPage === i ? 'active' : ''" ng-repeat="i in getNumber() track by $index"><a class="page-link" href="#" ng-click="search(i)">{{i}}</a></li>
          <li class="page-item">
            <a href="#" ng-click="search(currentPage+1)"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span> </a>
          </li>
        </ul>
        
      </div>
      
    </div>
  </body>

</html>

关于javascript - 使用 Angular 和分页从数组中获取下一组和上一组记录，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42302984/

26 4 0
文章推荐： php - BLOB 图像返回损坏的图像
文章推荐： javascript - jquery cycle 将隐藏功能更改为禁用
文章推荐： c++ - 模板默认参数作为指向自身的指针
文章推荐： javascript - jQuery 验证插件 - 禁用某些字段上的错误消息
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com