首页 > 编程 > JavaScript > 正文

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

2019-11-19 17:11:44
字体:
来源:转载
供稿:网友

今天我们来看看一种只实现分页没有查询的例子吧,先看效果:

采用了Angular-UI中的分页组件,关于Angular-UI如何使用请移步这里https://angular-ui.github.io/bootstrap/中的bootstrap章节(其中ui-router等我也建议你多看看)

注意:必须按照官网上引入相应的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;//共有多少条数据     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看,就拿下来了;

点击这里进行下载

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。谢谢大家对武林网的支持。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表