利用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 相关文章推荐
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
ECMAScript6--解构
Mar 30 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
JS 实现微信扫一扫功能
Sep 14 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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 中文处理函数集合
2008/08/27 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
JS实现图片切换特效
2019/12/23 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python多线程学习资料
2012/12/19 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
人事档案接收函
2014/01/12 职场文书
活动总结书
2014/05/08 职场文书
预防煤气中毒方案
2014/06/16 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
研究生论文答辩开场白
2015/05/27 职场文书