<!DOCTYPE html>
|
<!--[if lt IE 7]>
|
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
<!--[if IE 7]>
|
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
<!--[if IE 8]>
|
<html class="no-js lt-ie9"> <![endif]-->
|
<!--[if gt IE 8]><!-->
|
<html class="no-js"> <!--<![endif]-->
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width">
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
|
<script src="../bower_components/angular/angular.js"></script>
|
<script src="../dist/ng-table.js"></script>
|
<link rel="stylesheet" href="../dist/ng-table.css">
|
|
<style>
|
/* original source: http://elvery.net/demo/responsive-tables/ */
|
@media only screen and (max-width: 800px){
|
.demo-reponsiveTable table,
|
.demo-reponsiveTable thead,
|
.demo-reponsiveTable tbody,
|
.demo-reponsiveTable th,
|
.demo-reponsiveTable td,
|
.demo-reponsiveTable tr {
|
display: block;
|
}
|
/* Hide table sorting (but not display: none;, for accessibility) */
|
/* Note: we're hiding the sorting because it looks terrible! Making this pretty is an exercise for the reader*/
|
.demo-reponsiveTable thead tr:first-child {
|
position: absolute;
|
top: -9999px;
|
left: -9999px;
|
}
|
.demo-reponsiveTable tr {
|
border: 1px solid #ccc;
|
}
|
.demo-reponsiveTable table>tbody>tr>td,
|
.demo-reponsiveTable table>thead>tr>th {
|
/* Behave like a "row" */
|
border: none;
|
border-bottom: 1px solid #eee;
|
position: relative;
|
padding-left: 50%;
|
white-space: normal;
|
text-align: left;
|
}
|
.demo-reponsiveTable table>tbody>tr>td:before,
|
.demo-reponsiveTable table>thead>tr>th:before {
|
/* Now like a table header */
|
position: absolute;
|
/* Top/left values mimic padding */
|
top: 6px;
|
left: 6px;
|
width: 45%;
|
padding-right: 10px;
|
white-space: nowrap;
|
text-align: left;
|
font-weight: bold;
|
/* Label the data */
|
content: attr(data-title-text);
|
}
|
}
|
</style>
|
</head>
|
<body ng-app="main">
|
|
<h1>Responsive table</h1>
|
|
<p><strong>Resize the the width of browser window to see table switch to <em>'card view'</em></strong></p>
|
|
<div ng-controller="DemoCtrl" class="demo-reponsiveTable clearfix">
|
|
<button class="btn btn-default" ng-click="removeFilters()">Remove filters</button>
|
<button class="btn btn-default" ng-click="addFilters()">Add filters</button>
|
|
<table ng-table="tableParams" class="table table-bordered table-striped">
|
<tr ng-repeat="user in $data">
|
<td title="'Full Name'" title-alt="'Name'" sortable="'name'" filter="filters.name">
|
{{user.name}}
|
</td>
|
<td title="'Age'" sortable="'age'" filter="filters.age">
|
{{user.age}}
|
</td>
|
</tr>
|
</table>
|
|
|
<script>
|
var app = angular.module('main', ['ngTable']).
|
controller('DemoCtrl', function ($scope, $filter, NgTableParams) {
|
var data = [
|
{name: "Moroni", age: 50},
|
{name: "Tiancum", age: 43},
|
{name: "Jacob", age: 27},
|
{name: "Nephi", age: 29},
|
{name: "Enos", age: 34},
|
{name: "Tiancum", age: 43},
|
{name: "Jacob", age: 27},
|
{name: "Nephi", age: 29},
|
{name: "Enos", age: 34},
|
{name: "Tiancum", age: 43},
|
{name: "Jacob", age: 27},
|
{name: "Nephi", age: 29},
|
{name: "Enos", age: 34},
|
{name: "Tiancum", age: 43},
|
{name: "Jacob", age: 27},
|
{name: "Nephi", age: 29},
|
{name: "Enos", age: 34}
|
];
|
$scope.data = data;
|
|
$scope.removeFilters = function(){
|
$scope.filters = { name: false, age: false };
|
};
|
$scope.addFilters = function(){
|
$scope.filters = {
|
name: {
|
'name': 'text'
|
},
|
age: {
|
'age': 'number'
|
}
|
};
|
};
|
|
$scope.addFilters();
|
|
$scope.tableParams = new NgTableParams({
|
page: 1, // show first page
|
count: 10, // count per page
|
filter: {
|
//name: 'M' // initial filter
|
},
|
sorting: {
|
//name: 'asc' // initial sorting
|
}
|
}, {
|
filterOptions: { filterDelay: 0 },
|
total: data.length, // length of data
|
getData: function ($defer, params) {
|
// use built-in angular filter
|
var filteredData = params.filter() ?
|
$filter('filter')(data, params.filter()) :
|
data;
|
var orderedData = params.sorting() ?
|
$filter('orderBy')(filteredData, params.orderBy()) :
|
data;
|
|
params.total(orderedData.length); // set total for recalc pagination
|
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
|
}
|
});
|
})
|
</script>
|
|
</div>
|
|
|
</body>
|
</html>
|
