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,超强推荐expand.js
Dec 23 Javascript
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
jQuery 常见开发使用技巧总结
Dec 26 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
javascript常用的正则表达式实例
May 15 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
深入学习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
hessian 在PHP中的使用介绍
2010/12/13 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
Prototype Function对象 学习
2009/07/12 Javascript
jQuery $.each的用法说明
2010/03/22 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
js实现抽奖效果
2017/03/27 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
python定位xpath 节点位置的方法
2019/08/27 Python
python str字符串转uuid实例
2020/03/03 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
幼儿园保育员辞职信
2014/01/12 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
治超工作实施方案
2014/05/04 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis