這篇文章主要介紹如何使用Angular+Angular-Ui實(shí)現(xiàn)分頁，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司為您提適合企業(yè)的網(wǎng)站設(shè)計(jì)?讓您的網(wǎng)站在搜索引擎具有高度排名，讓您的網(wǎng)站具備超強(qiáng)的網(wǎng)絡(luò)競爭力！結(jié)合企業(yè)自身，進(jìn)行網(wǎng)站設(shè)計(jì)及把握，最后結(jié)合企業(yè)文化和具體宗旨等，才能創(chuàng)作出一份性化解決方案。從網(wǎng)站策劃到成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)， 我們的網(wǎng)頁設(shè)計(jì)師為您提供的解決方案。

先看效果：

采用了Angular-UI中的分頁組件，關(guān)于Angular-UI如何使用請(qǐng)移步這里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;//初始當(dāng)前頁
  $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))
    }//此方法可以將一個(gè)數(shù)組分成多個(gè)數(shù)組并且放在了一個(gè)大數(shù)組里面，按每個(gè)數(shù)組10條數(shù)據(jù)【因?yàn)榻M件默認(rèn)為10條數(shù)據(jù)一頁】存放，假如41條數(shù)據(jù)的話我們將分成5頁
 
    
   }
  );

以上是“如何使用Angular+Angular-Ui實(shí)現(xiàn)分頁”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標(biāo)題：如何使用Angular+Angular-Ui實(shí)現(xiàn)分頁
文章鏈接：http://chinadenli.net/article2/gchsoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、建站公司、微信小程序、微信公眾號(hào)、網(wǎng)站設(shè)計(jì)、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)