首页 > 代码库 > angular分页的实现

angular分页的实现

2024-09-11 18:59:08   218人阅读

做数据处理经常要用到分页，ui-bootstrap的分页挺好用的，但是要知道每个属性的意思，之前就在items-per-page上入了坑，ui-bootstrap默认是每页显示10条数据，如果这个值不设置和你想显示的数据条数相同的话，总数据量就会出错，以下是一个例子

<ul uib-pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" items-per-page="5"
    ng-change="vm.userAction.init()" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;"
    first-text="&laquo;" last-text="&raquo;"></ul>
最终实现的效果是首尾，上下页，数字，
boundary-links="true" 设置是否显示首尾按钮
 total-items="totalItems" 所有页面中的项目总数
具体参照   http://angular-ui.github.io/bootstrap/


这里想要强调的是缓存分页，当点击第二页内容，第二页中进入别的页面，当返回回来时候，页面还是第二页
   //缓存页数
            var nowPage = window.sessionStorage.getItem(‘vm.model.currentPage‘);

            if (page) { //这里传入Page参数主要是想点击查询按钮时候，页面回到第一页，而不是缓存的第二页
                nowPage = page;
                window.sessionStorage.setItem(‘vm.model.currentPage‘, nowPage);

            } else {
                if ($scope.currentPage != undefined) {
                    nowPage = $scope.currentPage;
                    window.sessionStorage.setItem(‘vm.model.currentPage‘, $scope.currentPage);
                } else if (nowPage == undefined || nowPage == ‘undefined‘) {
                    nowPage = 1;
                    window.sessionStorage.setItem(‘vm.model.currentPage‘, nowPage);
                } else {
                    window.sessionStorage.setItem(‘vm.model.currentPage‘, nowPage);
                }
            }
            var params1 = {
                orgName: vm.model.orgName,
                pageIndex: nowPage,
                pageRecorders: 10,
                token: window.sessionStorage.getItem(‘token‘)

            }
            NetWorkService.orgReport(params1).then(function (res) {
                console.log(res.data)
                $scope.currentPage = window.sessionStorage.getItem(‘vm.model.currentPage‘);//最后获取一下
                vm.model.orgList = res.data.orgList;
                $scope.totalItems = res.data.totalRecorders;

            })

 

angular分页的实现


联系
我们