快捷導(dǎo)航

利用Angular+Angular-Ui實現(xiàn)分頁（代碼加簡單）

更新時間：2017年03月10日 11:47:15 作者：薄禍

這篇文章主要介紹了利用Angular+Angular-Ui實現(xiàn)分頁，利用Angular+Angular-Ui實現(xiàn)的分頁分頁代碼更加簡單，更加容易懂哦，相信本文的內(nèi)容對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。

今天我們來看看一種只實現(xiàn)分頁沒有查詢的例子吧，先看效果：

采用了Angular-UI中的分頁組件，關(guān)于Angular-UI如何使用請移步這里https://angular-ui.github.io/bootstrap/中的bootstrap章節(jié)（其中ui-router等我也建議你多看看）

注意：必須按照官網(wǎng)上引入相應(yīng)的js和css才能生效，千萬不要忘記了。

HTML代碼如下：

<div class="">
 <table class="table">
  <thead class="hed">
  <tr>
   <th>省份1</th>
   <th>省份2</th>
   <th>省份3</th>
   <th>省份4</th>
  </tr>
  </thead>
  <tbody>
  <tr ng-repeat="a in allitem[currentPage-1]">
   <td ng-bind="a.n"></td>
   <td ng-bind="a.s"></td>
   <td ng-bind="a.n"></td>
   <td ng-bind="a.s"></td>
  </tr>
 
  </tbody>
 
 </table>
 
</div>
<div class="">
 <pagination boundary-links="true" total-items="totalItems"
    ng-model="currentPage" class="pagination-sm embed-responsive-item"
    previous-text="上一頁"
    next-text="下一頁"
    first-text="首頁"
    last-text="尾頁"
    max-size="maxSize"
    rotate="false" num-pages="numPages">
 
 
 </pagination>
</div>

JS代碼如下：

$scope.currentPage =1;//初始當前頁
  $scope.maxSize = 3;//最多顯示3頁其他的用···代替
  $scope.allitem=[];//存放所有頁
  $http.get('./js/test').success(
   function (data) {
    $scope.addr=data.l;
    var num= $scope.addr.length;
 
    $scope.totalItems =num;//共有多少條數(shù)據(jù)
 
    for(var i=0;i<num;i+=10){
     $scope.allitem.push($scope.addr.slice(i,i+10))
    }//此方法可以將一個數(shù)組分成多個數(shù)組并且放在了一個大數(shù)組里面，按每個數(shù)組10條數(shù)據(jù)【因為組件默認為10條數(shù)據(jù)一頁】存放，假如41條數(shù)據(jù)的話我們將分成5頁
 
    
   }
  );

筆者Js文件夾下的test.json存放的是中國地址JSon數(shù)據(jù)源，用于測試。

================================================================================

PS:上述版本是15年的了；現(xiàn)在上傳下最新版本的樣例吧；其實就是官網(wǎng)上的例子，鑒于某些寶寶不會FQ看，就拿下來了；

點擊這里進行下載

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。謝謝大家對腳本之家的支持。

您可能感興趣的文章: