zoukankan      html  css  js  c++  java
  • angular分页的实现

    做数据处理经常要用到分页,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;
    
                })
  • 相关阅读:
    相关分析[SDOI2017]
    排序[HEOI2016/TJOI2016]
    逆序对[AHOI2008]
    逆序对数列[HAOI2009]
    小Z的袜子「2009国家集训队」
    http抓包—Content-Type讲解
    mysql——leetcode问题记录
    linux--vi命令
    Linux—echo命令
    Linux—文件命令之touch命令
  • 原文地址:https://www.cnblogs.com/alhh/p/6654846.html
Copyright © 2011-2022 走看看