<!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>
<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">
<div ng-controller="DemoCtrl">
<p><strong>Page:</strong> {{tableParams.page()}}</p>
<p><strong>Count per page:</strong> {{tableParams.count()}}</p>
<p><strong>Sorting:</strong> {{tableParams.sorting()|json}}</p>
<p><strong>Filter:</strong> {{tableParams.filter()|json}}</p>
<table class="table table-bordered" ng-table="tableParams" show-filter="true">
<tr ng-repeat="g in $tabledata">
<td data-title="'Name'" sortable="'name'" filter="{ 'name': 'text' }">
{{ g.name }}
</td>
<td data-title="'Head2'" sortable="'Head2'">
{{ g.Head2 }}
</td>
<td data-title="'Head3'" sortable="'Head3'">
{{ g.Head3 }}
</td>
<td data-title="'Head4'" sortable="'Head4'">
{{ g.Head4 }}
</td>
<td data-title="'Head5'" sortable="'Head5'">
{{ g.Head5 }}
</td>
</tr>
</table>
</div>
</body>
</html>
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, ngTableParams, $filter) {
$scope.tabledata = [
{
name : 'head value 01',
Head2 : 'head value 02',
Head3 : 'head value 03',
Head4 : 'head value 04',
Head5 : 'head value 05'
},
{
name : 'head value 11',
Head2 : 'head value 12',
Head3 : 'head value 13',
Head4 : 'head value 14',
Head5 : 'head value 15'
},
{
name : 'head value 21',
Head2 : 'head value 22',
Head3 : 'head value 23',
Head4 : 'head value 24',
Head5 : 'head value 25'
},
{
name : 'head value 31',
Head2 : 'head value 32',
Head3 : 'head value 33',
Head4 : 'head value 34',
Head5 : 'head value 35'
},
{
name : 'head value 41',
Head2 : 'head value 42',
Head3 : 'head value 43',
Head4 : 'head value 44',
Head5 : 'head value 45'
},
{
name : 'head value 51',
Head2 : 'head value 52',
Head3 : 'head value 53',
Head4 : 'head value 54',
Head5 : 'head value 55'
},
{
name : 'head value 61',
Head2 : 'head value 62',
Head3 : 'head value 63',
Head4 : 'head value 64',
Head5 : 'head value 65'
},
{
name : 'head value 71',
Head2 : 'head value 72',
Head3 : 'head value 73',
Head4 : 'head value 74',
Head5 : 'head value 75'
},
{
name : 'head value 81',
Head2 : 'head value 82',
Head3 : 'head value 83',
Head4 : 'head value 84',
Head5 : 'head value 85'
},
{
name : 'head value 91',
Head2 : 'head value 92',
Head3 : 'head value 93',
Head4 : 'head value 94',
Head5 : 'head value 95'
},
{
name : 'head value 91',
Head2 : 'head value 92',
Head3 : 'head value 93',
Head4 : 'head value 94',
Head5 : 'head value 95'
},
{
name : 'head value 91',
Head2 : 'head value 92',
Head3 : 'head value 93',
Head4 : 'head value 94',
Head5 : 'head value 95'
},
{
name : 'head value 91',
Head2 : 'head value 92',
Head3 : 'head value 93',
Head4 : 'head value 94',
Head5 : 'head value 95'
},
{
name : 'head value 91',
Head2 : 'head value 92',
Head3 : 'head value 93',
Head4 : 'head value 94',
Head5 : 'head value 95'
},
{
name : 'head value 91',
Head2 : 'head value 92',
Head3 : 'head value 93',
Head4 : 'head value 94',
Head5 : 'head value 95'
},
{
name : 'head value 91',
Head2 : 'head value 92',
Head3 : 'head value 93',
Head4 : 'head value 94',
Head5 : 'head value 95'
},
{
name : 'head value 91',
Head2 : 'head value 92',
Head3 : 'head value 93',
Head4 : 'head value 94',
Head5 : 'head value 95'
},
{
name : 'head value 91',
Head2 : 'head value 92',
Head3 : 'head value 93',
Head4 : 'head value 94',
Head5 : 'head value 95'
}
];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 5, // count per page
sorting: {
name: 'asc' // initial sorting
},
filter: {
name: '' // initial filter
}
}, {
total: $scope.tabledata.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')($scope.tabledata, params.orderBy()) : $scope.tabledata;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
body {
padding: 10px !important;
}