利用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 相关文章推荐
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
js命名空间写法示例
Dec 18 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
JS定义类的六种方式详解
May 12 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 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
php5中类的学习
2008/03/28 PHP
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
PHP 编程安全性小结
2010/01/08 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
Python 初始化多维数组代码
2008/09/06 Python
python实现计算倒数的方法
2015/07/11 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
python之django母板页面的使用
2018/07/03 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
表扬信格式
2014/01/12 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
企业工会工作总结2015
2015/05/13 职场文书
正则表达式基础与常用验证表达式
2022/06/16 Javascript