利用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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 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中spl_autoload_register函数的用法总结
2013/11/07 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
基于JQuery制作的产品广告效果
2010/12/08 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
JavaScript 异步调用
2017/10/25 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
vue如何使用rem适配
2021/02/06 Vue.js
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
分享6个隐藏的python功能
2017/12/07 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
python3让print输出不换行的方法
2020/08/24 Python
快速创建python 虚拟环境
2020/11/28 Python
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
防沙治沙典型材料
2014/05/07 职场文书
学校党员对照检查材料
2014/08/28 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
个人求职自荐信范文
2015/03/06 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL