利用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 纠正 cleanWhitespace函数
Mar 11 Javascript
小议Javascript中的this指针
Mar 18 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 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生成唯一订单号的方法汇总
2015/04/16 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
picChange 图片切换特效的函数代码
2010/05/06 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
如何用python整理附件
2018/05/13 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
python中pivot()函数基础知识点
2021/01/03 Python
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
高中自我鉴定
2013/12/20 职场文书
出纳员岗位职责
2014/03/13 职场文书
继承公证书样本
2014/04/04 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
复活读书笔记
2015/06/29 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python