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无法执行的解决办法
Feb 25 Javascript
JS模板实现方法
Apr 03 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
浅谈node的事件机制
Oct 09 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
详解Node.js如何处理ES6模块
May 15 Javascript
微信小程序中顶部导航栏的实现代码
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安装为Apache DSO
2006/10/09 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
Python自定义线程类简单示例
2018/03/23 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
Django配置跨域并开发测试接口
2020/11/04 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
生产现场工艺工程师岗位职责
2013/11/28 职场文书
护理专业学生的求职信范文
2013/12/11 职场文书
挂职自我鉴定
2014/02/26 职场文书
环保建议书作文
2014/03/12 职场文书
研修心得体会
2014/09/04 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
营销与策划实训报告
2014/11/05 职场文书
合同纠纷调解书
2015/05/20 职场文书
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS