亖呉?盀
angularjs的数据表格
需要使用angualarjs、bootstrap、dirpagination.js
效果图：
1.html部分
<!doctype html>
<html xmlns="http://www.51sjk.com/Upload/Articles/1/0/284/284458_20210710004129148.jpg" data-ng-app="app">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>angularjs的数据表格</title>
<link rel="stylesheet" rel="external nofollow" />
<link 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，希望对大家有所帮助
