這篇文章主要介紹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 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 >應用代碼</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”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
