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