利用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 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
jquery之Document元素选择器篇
Aug 14 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
实测jquery data()如何存值
Aug 18 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
深入理解Node module模块
Mar 26 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
JS实现横向轮播图(中级版)
Jan 18 Javascript
通过JS判断网页是否为手机打开
Oct 28 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实现Socket服务器的代码
2008/04/03 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
ES6中Set和Map用法实例详解
2020/03/02 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
Python中functools模块的常用函数解析
2016/06/30 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
Python @property使用方法解析
2019/09/17 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
Python 列表的清空方式
2020/01/13 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
总裁秘书岗位职责
2013/12/04 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
谢师宴邀请函
2015/02/02 职场文书
医院员工辞职信范文
2015/05/12 职场文书
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技