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 相关文章推荐
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
基于JS实现视频上传显示进度条
May 12 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 FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
php计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
Python循环语句之break与continue的用法
2015/10/14 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
在python里从协程返回一个值的示例
2019/02/19 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
美国精油公司:Plant Therapy
2019/05/17 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
体育教师个人的自我评价
2014/02/16 职场文书
火锅店营销方案
2014/02/26 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
公务员检讨书
2014/11/01 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
志愿服务心得体会
2016/01/15 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js