利用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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
js实现文章目录索引导航(table of content)
May 10 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
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实现的下载css文件中的图片的代码
2010/02/08 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
Python随机数random模块使用指南
2016/09/09 Python
Python iter()函数用法实例分析
2018/03/17 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
python将list转为matrix的方法
2018/12/12 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
台湾旅游网站:灿星旅游
2018/10/11 全球购物
幼儿园三八妇女节活动方案
2014/03/11 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
任命书标准格式
2015/03/02 职场文书
幼儿园教师求职信
2015/03/20 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python