利用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 HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
JavaScript实现简单进度条效果
Mar 25 Javascript
利用node.js开发cli的完整步骤
Dec 29 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 has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
Vue表单实例代码
2016/09/05 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
详解python爬虫系列之初识爬虫
2019/04/06 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
2014年五四青年节演讲稿范文
2014/04/22 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
pandas数值排序的实现实例
2021/07/25 Python