2017-05-31 68 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 <<