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;
    
                })
  • 相关阅读:
    15款精美的 WordPress 电子商务网站模板
    15套免费的扁平化界面设计素材【免费下载】
    35幅使用小图片组成的创意插图作品 【上篇】
    sqlserver2014两台不同服务器上数据库同步
    C++ Reflection Library
    美国的包容主要体现在接受移民,那么,中国的包容主要体现在哪里呢?答案就是资本
    mysql主从复制
    Kubernetes+Istio
    Net异步编程
    研发的困境----DEVOPS
  • 原文地址:https://www.cnblogs.com/alhh/p/6654846.html
Copyright © 2011-2022 走看看