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


Posted in Javascript onMarch 10, 2017

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

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

采用了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看,就拿下来了;

点击这里进行下载

总结

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

Javascript 相关文章推荐
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
创建与框架无关的JavaScript插件
Dec 01 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 #Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 #Javascript
js实现产品缩略图效果
Mar 10 #Javascript
BootStrap注意事项小结(五)表单
Mar 10 #Javascript
微信小程序 弹框和模态框实现代码
Mar 10 #Javascript
BootStrap表单宽度设置方法
Mar 10 #Javascript
Angular.js基础学习之初始化
Mar 10 #Javascript
You might like
PHP代码优化的53个细节
2014/03/03 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
python排序方法实例分析
2015/04/30 Python
python发送邮件功能实现代码
2016/07/15 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
python实现批量文件重命名
2019/10/31 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
总经理助理的八要求
2013/11/12 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
《忆江南》教学反思
2014/04/07 职场文书
新年爱情寄语
2014/04/08 职场文书
授权委托书格式范文
2014/08/02 职场文书
护士工作失误检讨书
2014/09/14 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
初婚初育证明范本
2015/06/18 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers