AngularJS 与Bootstrap实现表格分页实例代码


Posted in Javascript onOctober 14, 2016

 AngularJS 从开始发布到现在使用的开发的者越来越多,也表明大多数做前端的朋友在往这边转,毕竟是Google 公司出品的产品啊,所以最近自己也在学习这部分知识。

AngularJS  Bootstrap实现表格分页:

最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页。

先上图看看最终结果:

 AngularJS 与Bootstrap实现表格分页实例代码

不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功能。

首先表格的数据源来自于,Server.js 点击下载。通过get取数后分页显示。

1.表格是通过ng-repeat来展示的,代码如下:

<table class="table table-bordered">
  <tr>
    <th>index</th>
    <th ng-repeat="(x,y) in items[0]">{{ x }}</th>
  </tr>
  <tr ng-repeat="x in items">
    <td>{{ $index + 1 }}</td>
    <td ng-bind="x.Name"></td>
    <td ng-bind="x.City"></td>
    <td ng-bind="x.Country"></td>
  </tr>
</table>

$index是repeat的默认参数。表格的列头是通过数据源(json)的第一行循环取的key值。当然要是Bootstrap要指定table的Class是table table-bordered。

2.分页是也是用ng-repeat,不得不说ng-repeat是常用指令。分页代码如下:

<nav>
  <ul class="pagination">
    <li>
      <a ng-click="Previous()">
        <span>上一页</span>
      </a>
    </li>
    <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" >
      <a ng-click="selectPage(page)" >{{ page }}</a>
    </li>
    <li>
      <a ng-click="Next()">
        <span>下一页</span>
      </a>
    </li>
  </ul>
</nav>

这里用了ng-click事件指令。还用到ng-class指令

ng-class="{active: isActivePage(page)}"

上面的代码是为了分页选中的样式。

这个表格加分页是假分页,从后端取一次数据,通过不同的分页显示json的筛选数据。

具体代码+注释:

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
  #divMain {
    width: 500px;
    margin: 0 auto;
    margin-top: 100px;
  }
  nav {
    position: relative;
    width:100%;
    height: 50px;
  }
  .pagination {
    right: 0px;
    position: absolute;
    top: -30px;
  }
  nav li {
    cursor: pointer;
  }
</style>
<div id="divMain" ng-app="myApp" ng-controller="myCtrl">
  <table class="table table-bordered">
    <tr>
      <th>index</th>
      <th ng-repeat="(x,y) in items[0]">{{ x }}</th>
    </tr>
    <tr ng-repeat="x in items">
      <td>{{ $index + 1 }}</td>
      <td ng-bind="x.Name"></td>
      <td ng-bind="x.City"></td>
      <td ng-bind="x.Country"></td>
    </tr>
  </table>
  <nav>
    <ul class="pagination">
      <li>
        <a ng-click="Previous()">
          <span>上一页</span>
        </a>
      </li>
      <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" >
        <a ng-click="selectPage(page)" >{{ page }}</a>
      </li>
      <li>
        <a ng-click="Next()">
          <span>下一页</span>
        </a>
      </li>
    </ul>
  </nav>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
<script type="text/javascript">
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function ($scope, $http) {
    $http.get("Service.js").then(function (response) {
      //数据源
      $scope.data = response.data.records;
      //分页总数
      $scope.pageSize = 5;
      $scope.pages = Math.ceil($scope.data.length / $scope.pageSize); //分页数
      $scope.newPages = $scope.pages > 5 ? 5 : $scope.pages;
      $scope.pageList = [];
      $scope.selPage = 1;
      //设置表格数据源(分页)
      $scope.setData = function () {
        $scope.items = $scope.data.slice(($scope.pageSize * ($scope.selPage - 1)), ($scope.selPage * $scope.pageSize));//通过当前页数筛选出表格当前显示数据
      }
      $scope.items = $scope.data.slice(0, $scope.pageSize);
      //分页要repeat的数组
      for (var i = 0; i < $scope.newPages; i++) {
        $scope.pageList.push(i + 1);
      }
      //打印当前选中页索引
      $scope.selectPage = function (page) {
        //不能小于1大于最大
        if (page < 1 || page > $scope.pages) return;
        //最多显示分页数5
        if (page > 2) {
          //因为只显示5个页数,大于2页开始分页转换
          var newpageList = [];
          for (var i = (page - 3) ; i < ((page + 2) > $scope.pages ? $scope.pages : (page + 2)) ; i++) {
            newpageList.push(i + 1);
          }
          $scope.pageList = newpageList;
        }
        $scope.selPage = page;
        $scope.setData();
        $scope.isActivePage(page);
        console.log("选择的页:" + page);
      };
      //设置当前选中页样式
      $scope.isActivePage = function (page) {
        return $scope.selPage == page;
      };
      //上一页
      $scope.Previous = function () {
        $scope.selectPage($scope.selPage - 1);
      }
      //下一页
      $scope.Next = function () {
        $scope.selectPage($scope.selPage + 1);
      };
    });
  })
</script>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS分页效果示例
Oct 11 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
深入学习js瀑布流布局
Oct 14 #Javascript
微信小程序 地图定位简单实例
Oct 14 #Javascript
Bootstrap作品展示站点实战项目2
Oct 14 #Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 #Javascript
js中json处理总结之JSON.parse
Oct 14 #Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 #Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 #Javascript
You might like
php中处理模拟rewrite 效果
2006/12/09 PHP
php公用函数列表[正则]
2007/02/22 PHP
php中用文本文件做数据库的实现方法
2008/03/27 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
js的逻辑运算符 ||
2010/05/31 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
python求pi的方法
2014/10/08 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
python图像和办公文档处理总结
2019/05/28 Python
python同步windows和linux文件
2019/08/29 Python
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
诚信承诺书范文
2014/03/27 职场文书
文秘求职信范文
2014/04/10 职场文书
企业文化演讲稿
2014/05/20 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL