添加分頁的角度JS表

Question

我有如下表：

<div class="container-fluid"> 

           <table class="table table-hover"> 
            <thead> 
            <tr> 
             <th>Action Date</th> 
             <th>Action Taken</th> 
             <th>Problem</th> 
             <th>Status</th> 
            </tr> 
            </thead> 
            <tbody> 
            <tr ng-repeat="contact in customer.contactHistory"> 
             <td>{{contact.actionDate}}</td> 
             <td>{{contact.actionTaken}}</td> 
             <td>{{contact.problem}}</td> 
             <td>{{contact.status}}</td> 
            </tr> 
            </tbody> 

           </table> 

          </div> 

我怎樣才能在這個添加分頁？我有一個單獨的js控制器文件。我想添加分頁，因此當頁面加載時只有10行可見。

Answer 1

將Pagination.js創建爲角度服務，如下所示，它可能需要您在代碼中執行代碼才能實現。

var app = angular.module('qaApp'); 
app.factory("paginationService", function($location) { 
    /** 
    * Create a Pagination object 
    * @type {{}} 
    */ 
    var obj = {}; 
    var url = $location.absUrl().split('/')[0]; 

    obj.pages = []; 

    /*if(url == 'test'){ 
     obj.url = "/design/views/paginationtest.html"; 
    }else{ 
     obj.url = "/design/views/pagination.html"; 
    }*/ 
    /* pagination view url (html fragment */ 
    obj.url = "/views/pagination.html"; 
    obj.newUrl = "/views/pagination-new.html"; 

    /* the last page */ 
    obj.lastPage = 1; 
    /* the current page */ 
    obj.currentPage = 1; 
    /* per page size */ 
    obj.perPage = 1; 
    /* total records */ 
    obj.totalRecords = 1; 
    /* record from */ 
    obj.from = 0; 
    /* record to */ 
    obj.to = 1; 
    /* set all the variable from the api */ 
    obj.set = function(data) { 
     if(data) { 
      obj.lastPage = data.last_page; 
      obj.currentPage = data.current_page; 
      obj.perPage = data.per_page; 
      obj.totalRecords = data.total; 
      obj.from = data.from; 
      obj.to = data.to; 
      /* enable/disable the next button */ 
      if(obj.currentPage == obj.lastPage) obj.nextDisabled = true; 
      else obj.nextDisabled = false; 
      /* enable/disable the previous button */ 
      if(obj.currentPage == 1) obj.previousDisabled = true; 
      else obj.previousDisabled = false; 
      obj.setPages(); 
     } 
    }; 
    obj.reset = function() { 
     obj.lastPage = false; 
     obj.currentPage = 1; 
     obj.perPage = 1; 
     obj.totalRecords = 0; 
     obj.from = 0; 
     obj.to = 1; 
     obj.nextDisabled = true; 
     obj.previousDisabled = true; 
     obj.setPages(); 
    }; 
    obj.next 
    /* travel to the next page */ 
    obj.loadNext = function(loadAPIData) { 
     obj.currentPage +=1; 
     loadAPIData(obj.currentPage); 
    }; 

    obj.loadPage = function(loadAPIData, pageNo){ 
     obj.currentPage = pageNo; 
     loadAPIData(obj.currentPage); 
    } 
    /* travel to the previous page */ 
    obj.loadPrevious = function(loadAPIData) { 
     if(obj.currentPage == 1){ 
      return; 
     } 
     obj.currentPage -=1; 
     loadAPIData(obj.currentPage); 
    }; 
    /* travel to the last page */ 
    obj.loadLast = function(loadAPIData) { 
     obj.currentPage = obj.lastPage; 
     loadAPIData(obj.currentPage); 
    }; 
    /* travel to the first page */ 
    obj.loadFirst = function(loadAPIData) { 
     obj.currentPage = 1; 
     loadAPIData(obj.currentPage); 
    }; 
    /* if next button is enabled */ 
    obj.nextDisabled = true; 
    /* if previous button is enabled */ 
    obj.previousDisabled = true; 
    /* Code Added for Pagination with Numbering*/ 
    obj.setPages = function() { 

     var pages = []; 
     totalPage = Math.ceil(obj.totalRecords/obj.perPage); 
     var startPage = obj.currentPage; 
     var endPage = totalPage; 
     if(obj.currentPage > 3) { 
      startPage = obj.currentPage - 3; 
      //pages.push({'class': '' , 'pageNo' : 1 , 'label' : "<<"}); 
     } 
     if(totalPage > obj.currentPage + 3){ 
      endPage = obj.currentPage + 3; 
     } 
     for (var i = startPage; i <= endPage; i++) { 
      if (i == obj.currentPage) { 
       pages.push({'class': 'active' , 'pageNo' : i, 'label' : i}); 
      } else { 
       pages.push({'class': '', 'pageNo' : i , 'label' : i}); 
      } 
     } 

     obj.pages = pages; 
    }; 

    /* return the pagination object */ 
    return obj; 
}); 

這裏是HTML用於顯示分頁UI如下

<div > 
     <div class="slide-animate" ng-include="pagination.url"></div> 
    </div>