ng-table插件（三-可配置分页）

ng-table可以支持可配置的分页

<div ng-app="myApp" class="container-fluid" ng-controller="demoController as demo">
  <div class="row">
    <div class="col-xs-12">
      <h2 class="page-header">Change page / page controls programmatically</h2>
      <div class="bs-callout bs-callout-info">
        <h4>Overview</h4>
        <p>The current page displayed by the table, along with the pager controls can be changed programatically using the <code>NgTableParams</code> API</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <accordion close-others="true" ng-init="isPageOpen = true;">
        <accordion-group is-open="isPageOpen">
          <accordion-heading>
            Current page <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isPageOpen, 'glyphicon-chevron-right': !isPageOpen}"></i>
          </accordion-heading>
          <form class="form-inline" novalidate>
            <div class="form-group">
              <label for="pageBinding">Set via bindings</label>
              <input type="number" class="form-control" id="pageBinding" min="1" placeholder="page #" ng-model="demo.tableParams.page" ng-model-options="{ getterSetter: true }">
            </div>
            <div class="form-group">
              <label for="page">Set via JS</label>
              <input type="number" class="form-control" id="page" min="1" placeholder="page #" ng-model="demo.nextPageNum" ng-change="demo.changePage(demo.nextPageNum)">
            </div>
          </form>
        </accordion-group>
        <accordion-group is-open="isSizeOpen">
          <accordion-heading>
            Current page size <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isSizeOpen, 'glyphicon-chevron-right': !isSizeOpen}"></i>
          </accordion-heading>
          <form class="form-inline" novalidate>
            <div class="form-group">
              <label for="pageSizeBinding">Set via bindings</label>
              <select id="pageSizeBinding" class="form-control input-sm" ng-model="demo.tableParams.count" ng-model-options="{ getterSetter: true}" ng-options="size for size in demo.tableParams.settings().counts"></select>
            </div>
            <div class="form-group">
              <label for="pageSize">Set via JS</label>
              <select id="pageSizeBinding" class="form-control" ng-model="demo.newPageSize" ng-options="size for size in demo.tableParams.settings().counts" ng-change="demo.changePageSize(demo.newPageSize)"></select>
            </div>
          </form>
        </accordion-group>
        <accordion-group is-open="isSizesOpen">
          <accordion-heading>
            Page size buttons <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isSizesOpen, 'glyphicon-chevron-right': !isSizesOpen}"></i>
          </accordion-heading>
          <form class="form-inline" novalidate>
            <div class="form-group">
              <label for="pageSizeBinding">Select page sizes:</label>
              <select id="pageSizeBinding" multiple class="form-control input-sm" ng-model="demo.selectedPageSizes" ng-options="size for size in demo.availablePageSizes" ng-change="demo.changePageSizes(demo.selectedPageSizes)" style="min-height: 80px"></select>
            </div>
          </form>
        </accordion-group>
      </accordion>
    </div>
  </div>
  <div class="row">
    <br/>
    <div class="col-xs-12">
      <table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
      <tr ng-repeat="row in $data">
        <td data-title="'Name'">{{row.name}}</td>
        <td data-title="'Age'">{{row.age}}</td>
        <td data-title="'Money'">{{row.money}}</td>
      </tr>
    </table>
    </div>
  </div>
</div>

javascirpt

(function() {
  "use strict";

  var app = angular.module("myApp", ["ngTable", "ngTableDemos", "ui.bootstrap"]);
//依赖注入具体的模块
  app.controller("demoController", demoController);//控制器
  demoController.$inject = ["NgTableParams", "ngTableSimpleMediumList"];//控制器注入NgTableParams ngtable模块，ngTableSimpleMediumList数据列表模块
  function demoController(NgTableParams, simpleList) {
    var self = this;
    self.tableParams = new NgTableParams({ count: 5 }, { counts: [5, 10, 20], dataset: simpleList});//默认设置
    
    self.selectedPageSizes = self.tableParams.settings().counts;//通过绑定调用
    self.availablePageSizes = [5, 10, 15, 20, 25, 30, 40, 50, 100];//通过绑定调用
    self.changePage = changePage;//通过绑定调用
    self.changePageSize = changePageSize;//通过绑定调用
    self.changePageSizes = changePageSizes;//通过绑定调用
    
    function changePage(nextPage){//通过ng-change调用
      self.tableParams.page(nextPage);
    }
    
    function changePageSize(newSize){//通过ng-change调用
      self.tableParams.count(newSize);
    }
    
    function changePageSizes(newSizes){//通过ng-change调用
      // ensure that the current page size is one of the options
      if (newSizes.indexOf(self.tableParams.count()) === -1) {
          newSizes.push(self.tableParams.count());
          newSizes.sort();
      }
      self.tableParams.settings({ counts: newSizes});
    }
  }
})();

效果：

1.PNG