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 相关文章推荐
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 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作的文本留言本的例子(一)
2006/10/09 PHP
php在线生成ico文件的代码
2007/10/09 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
php如何获取文件的扩展名
2015/10/28 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
ant design实现圈选功能
2019/12/17 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
企业出纳岗位职责
2014/03/12 职场文书
婚前协议书
2014/04/15 职场文书
电子商务实训报告总结
2014/11/05 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
关于python类SortedList详解
2021/09/04 Python
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python