2017-05-31 69 views
2

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

正在使用分页库一个很好的做法?当我使用分页库,它会加载所有

的数据,并分成多页,但如果什么有千DATAS的,

它会越来越慢吗?我在想,当我加载页面时,它只会得到这个页面的数据。就像当你点击页面2时一样。它会请求另一个数据。当您单击该页面时,您只会获取此页面的数据。它不会一次加载所有数据。但我很困惑。我不知道该怎么做。

例如,数字1至10仅用于页面1。数字11到20是第2页。我很想知道如何才能知道11到20是否仅适用于第2页的数据请求。

仅使用分页方式,我将载入所有数据并将其分隔成多个页面,这是一种很好的做法吗?或请求页面数据? 我还是很困惑。我希望有人能够启发我并帮助我。

+1

你应该每个请求分页数据。这意味着你必须改变你的Web服务(我认为你正在使用它),所以你可以发送当前页面,并发送一些限制和抵消,Web服务将得到那个(显然你必须使用一些查询数据库中的分页类型)花一点时间检查这个指令(异步设置)https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination –

+0

因此,对于分页的良好做法。每次点击页面,我会从数据库中获取数据?我会研究你提供的链接。谢谢btw。 – LordGrim

+0

是的,这是根据我的经验对此的最佳实践 –

回答

0

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

对于UI的自举-TPLS 2.xx的 -

<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的自举-TPLS 1.XX -

<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的自举-TPLS 0.XX -

<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-重复应该像:

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