zoukankan      html  css  js  c++  java
  • ng-table 是否启用分页/排序/搜索

    ng-table 设置applyFilter/applyPaging/applySort 为false 只是功能上的禁用,样式仍旧存在(如:排序按钮,分页按钮) 

    ng-table 不使用分页只需要设置 dataOptions:{applyPaging:false}  即可,设置后发现数据是全部加载到一页了,但是底下的分页按钮仍然显示;通过阅读ng-table 源码发现,要使按钮同步消失必须满足 ng-if="pages.length" 条件为false,继续阅读后发现pages 默认是定义的一个空数组,只有pages 返回空数组时,分页按钮就不会显示,即服务器返回的data 比上当前设置的count 四舍五入后小于1 时,分页按钮不显示。如果是getData 模式请求数据,设置 params.total(0); 分页按钮消失,通过counts 来控制页面数据显示的数量,下面是dataset 模式可以达到不分页并且分页按钮不显示的例子:

    1. 以一个空的数组初始化ng-table 然后再把数据添加进去,这时tableParams.total 为 0,所以pages 为空数组,分页按钮不显示

    self.tableParams = new NgTableParams({
        sorting:{lastModified:'desc'}    // 更新时间降序排列
    },{
        counts:[],    //禁用页面数据条目显示变更
        dataset:[],    //实例化列表,不给数据
        dataOptions:{
            applyPaging:false    //不分页
        }
    });
    //将数据赋给dataset
    self.tableParams.settings().dataset = respData;

    2. 正常初始化ng-table ,随后设置tableParams.total(0) 

    self.tableParams = new NgTableParams({
        sorting:{lastModified:'desc'}
    },{
        counts:[],
        dataset:respData,
        dataOptions:{
            applyPaging:false
        }
    });
    //设置数据总数为0
    self.tableParams.total(0)

    # ng-table 分页HTML 模板

    <!-- 列表底部功能按钮是否显示取决于data 数组是否为空 -->
    <div class="ng-cloak ng-table-pager" ng-if="params.data.length">
    
        <div ng-if="params.settings().counts.length" class="ng-table-counts btn-grouppull-right">
            <button ng-repeat="count in params.settings().counts" type="button" ng-class="{'active':params.count()== count}" ng-click="params.count(count)" class="btnbtn-default">
                <span ng-bind="count"></span>
            </button>
        </div>
        <!-- 分页是否显示取决于pages 数组是否为空 -->
        <ul ng-if="pages.length" class="paginationng-table-pagination">
            <li class="page-item" ng-class="{'disabled': !page.active && !page.current, 'active':page.current}" ng-repeat="page in pages" ng-switch="page.type">
                <a class="page-link" ng-switch-when="prev" ng-click="params.page(page.number)" href="">&laquo;</a> 
                <a class="page-link" ng-switch-when="first" ng-click="params.page(page.number)" href="">
                   <span ng-bind="page.number"></span>
                </a> 
                <a class="page-link" ng-switch-when="page" ng-click="params.page(page.number)" href="">
                    <span ng-bind="page.number"></span>
                </a> 
                <a class="page-link" ng-switch-when="more" ng-click="params.page(page.number)" href="">&#8230;</a>
                <a class="page-link" ng-switch-when="last" ng-click="params.page(page.number)" href="">
                    <span ng-bind="page.number"></span>
                </a> 
                <a class="page-link" ng-switch-when="next" ng-click="params.page(page.number)" href="">&raquo;</a>
            </li>
        </ul>
    </div>

    # ng-table 分页JS 源码

    /**
     * @ngdoc method
     * @name NgTableParams#generatePagesArray
     * @description Generate array of pages
     *
     * When no arguments supplied, the current parameter state of this `NgTableParams` instance will be used
     *
     * @param {boolean} currentPage which page must be active
     * @param {boolean} totalItems  Total quantity of items
     * @param {boolean} pageSize    Quantity of items on page
     * @param {number} maxBlocks    Quantity of blocks for pagination
     * @returns {Array} Array of pages
     */
    this.generatePagesArray = function (currentPage, totalItems, pageSize, maxBlocks) {
        if (!arguments.length) {
            currentPage = this.page();
            totalItems = this.total();
            pageSize = this.count();
        }
        var maxPage, maxPivotPages, minPage, numPages;
        maxBlocks = maxBlocks && maxBlocks < 6 ? 6 : maxBlocks;
        var pages = [];
        numPages = Math.ceil(totalItems / pageSize);
        if (numPages > 1) {
            pages.push({
                type: 'prev',
                number: Math.max(1, currentPage - 1),
                active: currentPage > 1
            });
            pages.push({
                type: 'first',
                number: 1,
                active: currentPage > 1,
                current: currentPage === 1
            });
            maxPivotPages = Math.round((_settings.paginationMaxBlocks - _settings.paginationMinBlocks) / 2);
            minPage = Math.max(2, currentPage - maxPivotPages);
            maxPage = Math.min(numPages - 1, currentPage + maxPivotPages * 2 - (currentPage - minPage));
            minPage = Math.max(2, minPage - (maxPivotPages * 2 - (maxPage - minPage)));
            var i = minPage;
            while (i <= maxPage) {
                if ((i === minPage && i !== 2) || (i === maxPage && i !== numPages - 1)) {
                    pages.push({
                        type: 'more',
                        active: false
                    });
                }
                else {
                    pages.push({
                        type: 'page',
                        number: i,
                        active: currentPage !== i,
                        current: currentPage === i
                    });
                }
                i++;
            }
            pages.push({
                type: 'last',
                number: numPages,
                active: currentPage !== numPages,
                current: currentPage === numPages
            });
            pages.push({
                type: 'next',
                number: Math.min(numPages, currentPage + 1),
                active: currentPage < numPages
            });
        }
        return pages;
    };
  • 相关阅读:
    叙旧
    注册表的基本操作(.Net)
    如何自己实现 JavaScript 的 new 操作符?
    装饰者模式和TypeScript装饰器
    彻底弄懂GMT、UTC、时区和夏令时
    Javascript 中 cookie 操作方式
    javascript实例教程:使用canvas技术模仿echarts柱状图
    实现memcached客户端:TCP、连接池、一致性哈希、自定义协议
    Linux终端快速检测网站是否宕机的6个方法
    爬虫是什么吗?你知道爬虫的爬取流程吗?
  • 原文地址:https://www.cnblogs.com/liboo/p/9628095.html
Copyright © 2011-2022 走看看