Question

角度分页或任何分页的最佳做法是什么？

使用分页库是一种好习惯吗？当我使用分页库时，它将加载所有

数据并分成许多页面，但如果有数千个数据，

它会变慢吗？我在思考，当我加载页面时，它只会获取此页面的数据。就像你点击第2页一样。它会请求另一个数据。单击该页面时，您将只获取此页面的数据。它不会立即加载所有数据。但我很困惑。我不知道该怎么做。

例如，数字1到10仅适用于第1页。数字11到20用于第2页。我在考虑如何在您请求数据时知道11到20是否适用于第2页时头痛。

使用分页是一个好习惯，我将加载所有数据并将其分成页面？或者请求页面数据？我还是很困惑。我希望有人能够启发并帮助我。

Answer 1

Step:1
npm install ngx-pagination --save

Step:2
app.module.ts
import {NgxPaginationModule} from 'ngx-pagination';
@NgModule({
    imports: [BrowserModule, NgxPaginationModule], // <-- include it in your app module
    declarations: [MyComponent],
    bootstrap: [MyComponent]
})

Step:3
app.component.html

<div class="col-md-3">
   <input type="text" class="form-control" placeholder="Search by brand/year/color 
       " [(ngModel)]="term">
</div>

<div class="col-lg-6" *ngFor="let car of data |filter:term | paginate: 
  {itemsPerPage:6, currentPage: p}">

  //Bind your data here//

</div>

<div class="container">
    <div class="pagination">
        <pagination-controls (pageChange)="p=$event"></pagination-controls>
    </div>
</div>

Answer 2

您可以使用Angularjs以非常简单的方式尝试ui-bootstrap分页。在您的HTML文件中，为页码按钮编写以下代码。

对于ui-bootstrap-tpls 2.x.x -

<ul uib-pagination total-items="filteredData.length" ng-model="currentPage" max-size="maxSize" class="pagination-sm pagination" rotate="false" boundary-links="true" items-per-page="itemsPerPage"></ul>

对于ui-bootstrap-tpls 1.x.x -

<uib-pagination total-items="filteredData.length" ng-model="currentPage" max-size="maxSize" class="pagination-sm pagination" rotate="false" boundary-links="true" items-per-page="itemsPerPage"></uib-pagination>

对于ui-bootstrap-tpls 0.x.x -

<pagination total-items="filteredData.length" ng-model="currentPage" max-size="maxSize" class="pagination-sm pagination" rotate="false" boundary-links="true" items-per-page="itemsPerPage"></pagination>

在javascript控制器中写道：

$scope.currentPage = 1;
$scope.itemsPerPage = 5;
$scope.maxSize = 5; //Number of pager buttons to show

你的ng-repeat应该是这样的：

<tr ng-repeat="cate in filteredData = (categoryList | filter : search:Name) | limitTo:itemsPerPage:itemsPerPage*(currentPage-1) track by $index">
   <td>{{$index+1}}</td>
   <td>{{cate.Name}}</td>
   <td>{{cate.Description}}</td>
</tr>

您必须将以下文件包含在HTML头中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

>> View Live Demo <<

Answer 3

您可以在 angular 中实现 UI 以进行分页并使用 Pagino 处理分页逻辑 https://github.com/pagino/pagino-js

角度分页

3 个答案: