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的button默认enter事件(回车事件)。
May 18 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 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 session 预定义数组
2009/03/16 PHP
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
Python语言进阶知识点总结
2019/05/28 Python
python实现移动木板小游戏
2020/10/09 Python
Django缓存Cache使用详解
2020/11/30 Python
Python之Sklearn使用入门教程
2021/02/19 Python
鱼油专家:Omegavia
2016/10/10 全球购物
劲霸男装广告词
2014/03/21 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
丽江古城导游词
2015/02/03 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
服装店员工管理制度
2015/08/07 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python