实例详解Angular Js分页显示数据
- 小云云原创
- 2018-02-27 14:17:081502浏览
在做项目的时候我们经常会用到分页显示数据，其实原理很简单：就是每次点击（下/上）一页的时候向后台发送请求获取相关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
以上是实例详解Angular Js分页显示数据的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：js跨域请求服务实例分析下一篇：JS中正则表达式的理解