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);

 

 

 

 

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
AngularJS 中实现分页通常需要使用到 ng-repeat 指令和自定义过滤器,以下是一个示例代码: HTML: ``` <div ng-app="myApp" ng-controller="myCtrl"> <ul> <li ng-repeat="item in filteredItems = (items | startFrom:(currentPage-1)*pageSize | limitTo:pageSize)">{{item}}</li> </ul> <div> <button ng-disabled="currentPage == 1" ng-click="currentPage=1">First</button> <button ng-disabled="currentPage == 1" ng-click="currentPage=currentPage-1">Previous</button> <button ng-disabled="currentPage == totalPages" ng-click="currentPage=currentPage+1">Next</button> <button ng-disabled="currentPage == totalPages" ng-click="currentPage=totalPages">Last</button> </div> <div> Current Page: {{currentPage}} </div> </div> ``` JavaScript: ``` var app = angular.module('myApp', []); app.filter('startFrom', function() { return function(input, start) { start = +start; return input.slice(start); } }); app.controller('myCtrl', function($scope) { $scope.items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10', 'item11', 'item12', 'item13', 'item14', 'item15']; $scope.currentPage = 1; $scope.pageSize = 5; $scope.totalPages = Math.ceil($scope.items.length / $scope.pageSize); }); ``` 在上面的代码中,我们定义了一个自定义过滤器 startFrom,它接收一个起始位置参数 start,返回从该位置开始的数组切片。我们还定义了一个控制器 myCtrl,其中 $scope.items 是我们需要分页的数组,$scope.currentPage 是当前页数,$scope.pageSize 是每页显示的数据量,$scope.totalPages 是总页数。在 HTML 中,我们使用 ng-repeat 指令和自定义过滤器来实现分页效果,并通过按钮来控制页码的变化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值