您的位置：首页 > Web前端 > BootStrap

数据表格：angualrjs和bootstrap一起使用做成的table

2017-03-30 15:47 776 查看

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" />

<link href="css/special.css" 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>



</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

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航