Angualrjs和bootstrap相结合如何实现数据表格table
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍Angualrjs和bootstrap相结合如何实现数据表格table，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
AngularJS的数据表格
需要使用angualarjs、bootstrap、dirPagination.js
效果图：
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 class="lazy" data-src="js/angular-1.3.0.js"></script>
<script class="lazy" data-src="vendor/dirPagination.js"></script>
<script class="lazy" data-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 >应用代码</th>
<th >应用名称</th>
<th >版本</th>
<th >状态</th>
<th >操作</th>
</tr>
</thead>
<tbody id="myApplyTable">
<tr ng-show="aly.users.length <= 0">
<td colspan="5" >还没有数据</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”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
