您可以使用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 <<
你應該每個請求分頁數據。這意味着你必須改變你的Web服務(我認爲你正在使用它),所以你可以發送當前頁面,併發送一些限制和抵消,Web服務將得到那個(顯然你必須使用一些查詢數據庫中的分頁類型)花一點時間檢查這個指令(異步設置)https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination –
因此,對於分頁的良好做法。每次點擊頁面,我會從數據庫中獲取數據?我會研究你提供的鏈接。謝謝btw。 – LordGrim
是的,這是根據我的經驗對此的最佳實踐 –