源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

利用Angular+Angular-Ui实现分页(代码加简单)

  • 时间:2022-07-11 13:48 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:利用Angular+Angular-Ui实现分页(代码加简单)
今天我们来看看一种只实现分页没有查询的例子吧,先看效果: [img]http://files.jb51.net/file_images/article/201703/2017310114144000.png?2017210114154[/img] 采用了Angular-UI中的分页组件,关于Angular-UI如何使用请移步这里[url=https://angular-ui.github.io/bootstrap/]https://angular-ui.github.io/bootstrap/[/url]中的bootstrap章节(其中ui-router等我也建议你多看看) [b]注意:[/b]必须按照官网上引入相应的js和css才能生效,千万不要忘记了。 [b]HTML代码如下:[/b]
<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>
[b]JS代码如下:[/b]
$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;//共有多少条数据
 
    for(var i=0;i<num;i+=10){
     $scope.allitem.push($scope.addr.slice(i,i+10))
    }//此方法可以将一个数组分成多个数组并且放在了一个大数组里面,按每个数组10条数据【因为组件默认为10条数据一页】存放,假如41条数据的话我们将分成5页
 
    
   }
  );
笔者Js文件夹下的test.json存放的是中国地址JSon数据源,用于测试。 ================================================================================ PS:上述版本是15年的了;现在上传下最新版本的 样例吧;其实就是官网上的例子,鉴于某些宝宝不会FQ看,就拿下来了; [url=http://xiazai.jb51.net/201703/yuanma/page-angular(jb51.net).rar]点击这里进行下载[/url] [b]总结[/b] 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。谢谢大家对编程素材网的支持。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部