<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script data-require="ng-table@*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
<script data-require="ng-table-export@0.1.0" data-semver="0.1.0" src="http://bazalt-cms.com/assets/ng-table-export/0.1.0/ng-table-export.js"></script>
<link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
<link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="main" ng-controller="DemoCtrl">
<p>Filter: <input class="form-control" type="text" ng-model="filter.$" /></p>
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" sortable="name">
{{user.name}}
</td>
<td data-title="'Age'" sortable="'age'">
{{user.age}}
</td>
</tr>
</table>
</body>
</html>
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
var data = [{name: "One", age: 50},
{name: "Two", age: 43},
{name: "Three", age: 27},
{name: "Four", age: 29},
{name: "Five", age: 34},
{name: "Six", age: 43},
{name: "Seven", age: 27},
{name: "Eight", age: 29},
{name: "Nine", age: 34},
{name: "Ten", age: 43},
{name: "Eleven", age: 27},
{name: "Twelve", age: 29},
{name: "Thirteen", age: 34},
{name: "Fourteen", age: 43},
{name: "Fifteen", age: 27},
{name: "Sixteen", age: 29}];
$scope.$watch("filter.$", function () {
$scope.tableParams.reload();
});
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
getData: function($defer, params) {
var filteredData = $filter('filter')(data, $scope.filter);
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) :
filteredData;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
},
$scope: $scope
});
});
body {
padding: 10px !important;
}
.ng-table {
border: 1px solid #000;
}