JavaScript

超轻量级php框架startmvc

Angularjs分页查询的实现

更新时间:2020-04-25 20:40:01 作者:startmvc
 angularjs实现分页查询功能的实例代码,具体代码如下所示://首页导入<scripttype="text/j

 angularjs实现分页查询功能的实例代码,具体代码如下所示:


//首页导入<script type="text/javascript" src="framework/tm.pagination.js"></script> 
//routerApp中注入'tm.pagination' 
//html页面上<tm-pagination conf="paginationConf"></tm-pagination> 
//controller.js代码 
var reSearch = function() { 
 var postData = { 
 //发送给后台的请求数据 
 currentPage: $scope.paginationConf.currentPage, 
 pageSize: $scope.paginationConf.itemsPerPage, 
 pickup: $scope.pickups, 
 startTime: $scope.startTime, 
 endTime: $scope.endTime, 
 minMoney: $scope.minMoney, 
 maxMoney: $scope.maxMoney 
 }; 
 $http.post('后台分页接口', postData).success(function(response) { 
 $scope.paginationConf.totalItems = response.totalElements; //总条数 
 $scope.takeGoodsLists = response.content; //具体内容 
 //共享的数据赋值 
 }); 
} 
$scope.reSearch = reSearch; 
//配置分页基本参数 
$scope.paginationConf = { 
 currentPage: 1, //起始页 
 //totalItems:300,//总共有多少条记录 
 itemsPerPage: 5, // 每页展示的数据条数 
 //pagesLength:5,//分页条目的长度 
 perPageOptions: [5, 10, 20] //可选择显示条数的数组 
}; 
//当页码和页面记录数发生变化时监控后台查询如果把currentPage和itemsPerPage分开监控的话则会触发两次后台事件。 
$scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', reSearch); 

angularjs分页查询 angularjs 分页