快捷導(dǎo)航

利用Angular+Angular-Ui實(shí)現(xiàn)分頁(yè)（代碼加簡(jiǎn)單）

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

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

今天我們來(lái)看看一種只實(shí)現(xiàn)分頁(yè)沒(méi)有查詢的例子吧，先看效果：

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

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

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="上一頁(yè)"
    next-text="下一頁(yè)"
    first-text="首頁(yè)"
    last-text="尾頁(yè)"
    max-size="maxSize"
    rotate="false" num-pages="numPages">
 
 
 </pagination>
</div>

JS代碼如下：

$scope.currentPage =1;//初始當(dāng)前頁(yè)
  $scope.maxSize = 3;//最多顯示3頁(yè)其他的用···代替
  $scope.allitem=[];//存放所有頁(yè)
  $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))
    }//此方法可以將一個(gè)數(shù)組分成多個(gè)數(shù)組并且放在了一個(gè)大數(shù)組里面，按每個(gè)數(shù)組10條數(shù)據(jù)【因?yàn)榻M件默認(rèn)為10條數(shù)據(jù)一頁(yè)】存放，假如41條數(shù)據(jù)的話我們將分成5頁(yè)
 
    
   }
  );

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

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

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

點(diǎn)擊這里進(jìn)行下載

總結(jié)

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

您可能感興趣的文章: