在做項目的時候我們經常會用到分頁顯示數據，其實原理很簡單：就是每次點擊（下/上）一頁的時候向后臺發送請求獲取相關JSON數據，我這里演示的是我每次請求都會傳給后臺兩個參數（pageSize–每頁要展示的數據、pageNo–當前頁碼 ）
HTML相關代碼：
<p id='demo' ng-app='myApp' ng-controller='myCtrl'>
<table>
<thead>
<th>序號</th>
<th>操作人</th>
<th>類別</th>
<th>電話</th>
<th>金額</th>
<th>操作時間</th>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{$index+1}}</td>
<td>{{item.operator}}</td>
<td>{{item.type}}</td>
<td>{{item.tell}}</td>
<td>{{item.price}}</td>
<td>{{item.operateTime}}</td>
</tr>
</tbody>
</table>
<p class="page">
<span class="nextPage" ng-click="nextPage()">下一頁</span>
<span class="prevPage" ng-click="lastPage()">上一頁</span>
<span>{{cur}}/{{totalPage}} 頁 共 {{totalNum}} 條記錄</span>
</p>
</p>CSS代碼就不貼上來了，大家自行補充；
JS代碼：
var params={
pageSize:10,
pageNo:1
}；var curPage=1;var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
init($scope,$http);
})function search($http,$scope){
params.pageNo=pageNo; $http({
method: 'GET',
url:后臺接口地址,
params:params
}).then(function successCallback(response) {
// 數據總條數
$scope.totalNum = response.data.totalNum; // 數據總頁數
$scope.totalPage = response.data.totalPage; // 數據當前頁
$scope.cur = curPage; // 列表詳細數據
var content = response.data.contents; for(var i in content){ // 數據操作人
content[i].operator= content[i].operator; // 數據電話
content[i].tell= content[i].tell; // 數據類別
content[i].type = content[i].type; // 數據操作時間
content[i].operateTime = content[i].createTime; // 數據價格
content[i].price = content[i].price;
} $scope.items = content;
}, function errorCallback(response) {
// 請求失敗執行代碼
if(response!=null)
error(response)
});
}function init($scope,$http){
search($http,$scope); $scope.nextPage=function(){
nextPage($http,$scope);
}; $scope.lastPage=function(){
lastPage($http,$scope);
};
}// 點擊上一頁function lastPage($http,$scope){
if(curPage>1){
curPage--;
search($http,$scope);
}
}// 點擊下一頁function nextPage($http,$scope){
if(curPage<totalPage){
curPage++;
search($http,$scope);
}
}
**注意**1、如果在你的項目里有根據數據前面的序號來刪除某條數據，建議看下這篇博文[Angular Js中$index的小心使用](http://blog.csdn.net/renfufei/article/details/43061877)2、如果你的項目后臺傳過來的數據沒有經過處理是全部的數據可以參考這篇博文[Angular Js表格分頁](http://www.cnblogs.com/smilecoder/p/6519833.html)
在做項目的時候我們經常會用到分頁顯示數據，其實原理很簡單：就是每次點擊（下/上）一頁的時候向后臺發送請求獲取相關JSON數據，我這里演示的是我每次請求都會傳給后臺兩個參數（pageSize–每頁要展示的數據、pageNo–當前頁碼 ），這篇文章分享一下相關內容；
HTML相關代碼：
<p id='demo' ng-app='myApp' ng-controller='myCtrl'>
<table>
<thead>
<th>序號</th>
<th>操作人</th>
<th>類別</th>
<th>電話</th>
<th>金額</th>
<th>操作時間</th>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{$index+1}}</td>
<td>{{item.operator}}</td>
<td>{{item.type}}</td>
<td>{{item.tell}}</td>
<td>{{item.price}}</td>
<td>{{item.operateTime}}</td>
</tr>
</tbody>
</table>
<p class="page">
<span class="nextPage" ng-click="nextPage()">下一頁</span>
<span class="prevPage" ng-click="lastPage()">上一頁</span>
<span>{{cur}}/{{totalPage}} 頁 共 {{totalNum}} 條記錄</span>
</p>
</p>CSS代碼就不貼上來了，大家自行補充；
JS代碼：
var params={
pageSize:10,
pageNo:1
}；var curPage=1;var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
init($scope,$http);
})function search($http,$scope){
params.pageNo=pageNo; $http({
method: 'GET',
url:后臺接口地址,
params:params
}).then(function successCallback(response) {
// 數據總條數
$scope.totalNum = response.data.totalNum; // 數據總頁數
$scope.totalPage = response.data.totalPage; // 數據當前頁
$scope.cur = curPage; // 列表詳細數據
var content = response.data.contents; for(var i in content){ // 數據操作人
content[i].operator= content[i].operator; // 數據電話
content[i].tell= content[i].tell; // 數據類別
content[i].type = content[i].type; // 數據操作時間
content[i].operateTime = content[i].createTime; // 數據價格
content[i].price = content[i].price;
} $scope.items = content;
}, function errorCallback(response) {
// 請求失敗執行代碼
if(response!=null)
error(response)
});
}function init($scope,$http){
search($http,$scope); $scope.nextPage=function(){
nextPage($http,$scope);
}; $scope.lastPage=function(){
lastPage($http,$scope);
};
}// 點擊上一頁function lastPage($http,$scope){
if(curPage>1){
curPage--;
search($http,$scope);
}
}// 點擊下一頁function nextPage($http,$scope){
if(curPage<totalPage){
curPage++;
search($http,$scope);
}
}
**注意**1、如果在你的項目里有根據數據前面的序號來刪除某條數據，建議看下這篇博文[Angular Js中$index的小心使用](http://blog.csdn.net/renfufei/article/details/43061877)2、如果你的項目后臺傳過來的數據沒有經過處理是全部的數據可以參考這篇博文[Angular Js表格分頁](http://www.cnblogs.com/smilecoder/p/6519833.html)相關推薦：
PHP實例代碼：AJAX 分頁顯示數據_PHP教程
jQuery+Ajax+PHP+Mysql實現分頁顯示數據實例講解_jquery
PHP實例代碼：AJAX 分頁顯示數據
以上就是實例詳解Angular Js分頁顯示數據的詳細內容，更多請關注php中文網其它相關文章！