在做專案的時候我們常常會用到分頁顯示數據，其實原理很簡單：就是每次點擊（下/上）一頁的時候向後台發送請求獲取相關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中文網其他相關文章！
