Angualrjs和bootstrap相结合实现数据表格table


Posted in Javascript onMarch 30, 2017

AngularJS的数据表格

需要使用angualarjs、bootstrap、dirPagination.js

效果图:

Angualrjs和bootstrap相结合实现数据表格table

1.html部分

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>angularjs的数据表格</title>
  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" />
  <link href="css/special.css" rel="external nofollow" rel="stylesheet" />
  <script src="js/angular-1.3.0.js"></script>
  <script src="vendor/dirPagination.js"></script>
  <script src="js/app/angularjsTable.js"></script>
</head>
<body>
  <form ng-controller="tableCtrl as aly">
    <div class="sp-page-content">
      <div class="sp-page-title">
        angularjs的数据表格
      </div>
      <table class="sp-grid">
        <thead>
          <tr>
            <th style="width: 20%;">应用代码</th>
            <th style="width: 20%;">应用名称</th>
            <th style="width: 20%;">版本</th>
            <th style="width: 20%;">状态</th>
            <th style="width: 20%;">操作</th>
          </tr>
        </thead>
        <tbody id="myApplyTable">
          <tr ng-show="aly.users.length <= 0">
            <td colspan="5" style="text-align: center;">还没有数据</td>
          </tr>
          <tr dir-paginate="user in aly.users|itemsPerPage:aly.itemsPerPage" total-items="aly.total_count">
            <td>{{user.code}}</td>
            <td>{{user.name}}</td>
            <td>{{user.version}}</td>
            <td>{{user.status}}</td>
            <td>
              <a class="sp-color-blue">安 装</a>|
              <a class="sp-color-green">查 看</a>
            </td>
          </tr>
          <!--<tr>
            <td>asd1234ddd</td>
            <td>员工管理</td>
            <td>v2.0.1</td>
            <td>已启用</td>
            <td><a ui-sref="app.apply_view" class="ligblue">查 看</a></td>
          </tr>-->
        </tbody>
      </table>
      <dir-pagination-controls max-size="8"
        direction-links="true"
        boundary-links="true"
        on-page-change="aly.getData(newPageNumber)">
              </dir-pagination-controls>
    </div>
  </form>
</body>
</html>

2.angularjsTable.js部分

'use strict';
var app = angular.module('app', [  
  'angularUtils.directives.dirPagination'
]);
app.controller('tableCtrl', ['$http', function ($http) {
  var self = this;
  //数据表格的控制器,动态加载table表格数据
  self.users = []; //declare an empty array
  self.pageno = 1; // initialize page no to 1
  self.total_count = 0;
  self.itemsPerPage = 10; //this could be a dynamic value from a drop down
  self.getData = function (pageno) { // This would fetch the data on page change.
    //In practice this should be in a factory.
    self.pageno = pageno;
    self.users = [];
    $http({
      method: 'get',
      url: 'json/myApply.txt',
      data: { pagesize: self.itemsPerPage, pageno: self.pageno }
    }).success(function (response) {
      self.users = response.data; //ajax request to fetch data into self.data
      self.total_count = response.total_count;
    });
  };
  self.getData(self.pageno);
  //数据表格的控制器 end
}]);

3.json数据部分 myApply.txt

{  
  "data":[
   {
  "id":"1",
"code":"dheu22102d",
"name":"项目管理",
"version":"v1.0.1",
"status":"未启用"
 },
 {
  "id":"2",
"code":"asd1234ddd",
"name":"员工管理",
"version":"v2.0.1",
"status":"已启用"
 }
],
"total_count": 22
}

以上所述是小编给大家介绍的Angualrjs和bootstrap相结合实现数据表格table,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
vue实现简易的双向数据绑定
Dec 29 Vue.js
微信小程序中顶部导航栏的实现代码
Mar 30 #Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 #Javascript
vue分类筛选filter方法简单实例
Mar 30 #Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 #Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 #Javascript
canvas绘制一个常用的emoji表情
Mar 30 #Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 #Javascript
You might like
php cli 方式 在crotab中运行解决
2010/02/08 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
js中let和var定义变量的区别
2018/02/08 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python实现Dijkstra算法
2018/10/17 Python
python超时重新请求解决方案
2019/10/21 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
django序列化serializers过程解析
2019/12/14 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
Python基于内置函数type创建新类型
2020/10/22 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
比利时买床:Beter Bed
2017/12/06 全球购物
自荐书模板
2013/12/15 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
开业庆典策划方案
2014/02/18 职场文书
计算机专业求职信
2014/06/02 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
单独二胎证明
2015/06/24 职场文书
七一表彰大会简报
2015/07/20 职场文书
检讨书之工作不认真
2019/08/14 职场文书
Django程序的优化技巧
2021/04/29 Python
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android