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 模板

<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>
    
    <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="">«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="">…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="">»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;
};

 

转载于:https://www.cnblogs.com/liboo/p/9628095.html