• 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;
    
                })
  • 相关阅读:
    Java线程安全和非线程安全
    时间戳获取(周,年,月,日)
    spring+spring 日志输出
    Spring+springMvc+Mybatis
    关于mysql处理百万级以上的数据时如何提高其查询速度的方法
    Tomcat 详解
    理解 $_POST、$_GET 、php://input
    php编译参数注解--不明白许多参数的作用 慎用 –with-curlwrappers参数【转载】
    centos6.5编译安装php[整理一]
    ubuntu16.04 安装chrome 和 phpstorm
  • 原文地址:https://www.cnblogs.com/alhh/p/6654846.html
Copyright © 2020-2023  润新知