如何在angularjs中對錶格進行分頁

我有一張我想分頁的表格。我在論壇上嘗試了許多解決方案，但他們不斷給我一些或其他錯誤。我想每個頁面顯示3條記錄。我試圖包含引導程序，但它也會給我帶來錯誤。我用這個plnker http://plnkr.co/edit/79yrgwiwvan3bAG5SnKx?p=preview但html5不支持元素。它在js.minify代碼塊將引發空引用錯誤如何在angularjs中對錶格進行分頁

//HTML for the view 


<table class="table table-bordered table-condensed table-hover table-striped" at-config="config"> 
    <thead> 
     <tr style="white-space: nowrap;"> 
      <th>Date</th> 
      <th>Organization No</th> 
      <th>Contract No</th> 
      <th>Company Name</th> 
      <th>Plan No</th> 
      <th>Status</th> 
     </tr> 
    </thead> 
    <tr ng-repeat="mas in vm"> 
     <td>{{mas.startDate | amDateFormat:&#39;YYYY-MM-DD&#39;}} </td> 
     <td>{{mas.organizationNumber}}</td> 
     <td>{{mas.contractNumber}} </td> 
     <td>{{mas.name}} </td> 
     <td>{{mas.planNumber}} </td> 
     <td>{{mas.description}} </td> 
     <td><span><a href="#" ng-click="getErrorDetailBySearch(mas.productAccountOid,mas.planNumber,mas.migrationRunID)">Details</a></span></td> 
    </tr>     
</table>

控制器代碼：

// it binds the data to vm 
var onSuccess = function (response) { 
    $scope.vm = response; 
    if ($scope.vm < 1) { 
     messageService.noDataFound(); 
    } 
} 
// it binds the dat

來源

2015-05-19 pankaj

您提供的鏈接工作正常。你的表格標記不包含任何按鈕，你的控制器缺少東西（當然這不是全部）。提供更多信息，有人可能會提供幫助。 – orange

您使用ui-bootstrap引用的plunker，這是用純的一組引導部件的angularjs。這樣，你不需要在你的項目中使用jQuery。

在ui-bootstrap有一個<pagination>指令。爲您處理分頁的組件。您需要爲該控件輸入一些變量，以創建分頁控件;像全部商品和每頁的商品。

如何使用pagination directive is documented here。請記住，當您將它包含在您的項目中時，請將其作爲依賴項添加。

angular.module('your-app', ['ui.bootstrap');

來源

2015-05-19 08:01:07 aludvigsen

如何在angularjs中對錶格進行分頁

回答

相關問題