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

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

  

    

      
Change page / page controls programmatically
      

        
Overview
        
The current page displayed by the table, along with the pager controls can be changed programatically using the NgTableParams API
      
    
  
  

    

      
        
          
            Current page 
          
          

            

              Set via bindings
              
            
            

              Set via JS
              
            
          
        
        
          
            Current page size 
          
          

            

              Set via bindings
              
            
            

              Set via JS
              
            
          
        
        
          
            Page size buttons 
          
          

            

              Select page sizes:
              
            
          
        
      
    
  
  

    

    

      

      

        
{{row.name}}
        
{{row.age}}
        
{{row.money}}
      
    
    
  

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