HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
<meta charset="utf-8" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<!--
style sheet -->
<script src="app.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.css">
</head>
<body ng-controller="myController" layout="column" ng-init="loadData()">
<!--<md-toolbar
class="md-whiteframe-1dp">
<div class="md-toolbar-tools">
<div
class="md-title">Material Design Data Table</div>
</div>
</md-toolbar>-->
<md-card>
<md-toolbar class="md-table-toolbar md-default" ng-hide="options.rowSelection && selected.length">
<div class="md-toolbar-tools">
<span>
<md-icon>
<img src="https://material.angularjs.org/latest/img/icons/angular-logo.svg" alt="Alternate
Text" />
</md-icon>
</span>
<span>AngularJS
DataTable</span>
<div flex></div>
<md-button class="md-icon-button" ng-click="loadStuff()">
<md-icon>refresh</md-icon>
</md-button>
</div>
</md-toolbar>
<!--<md-toolbar
class="md-table-toolbar alternate" ng-show="options.rowSelection
&& selected.length">
<div
class="md-toolbar-tools">
<span>{{selected.length}} {{selected.length > 1 ? 'items' : 'item'}}
selected</span>
</div>
</md-toolbar>-->
<md-table-container>
<table md-table md-row-select="options.rowSelection" multiple="{{options.multiSelect}}" md-progress="promise">
<thead md-head md-order="query.order" md-on-reorder="logOrder">
<tr md-row>
<th md-column md-order-by="Id">
<span>Id</span>
</th>
<th md-column md-order-by="CompanyName">
<span>CompanyName</span>
</th>
<th md-colu
<th md-column>
<span>ContactName</span>
</th>
<th md-column>
<span>ContactTitle</span>
</th>
<th md-column>
<span>Address</span>
</th>
<th md-column>
<span>City</span>
</th>
<th md-column>
<span>PostalCode</span>
</th>
<th md-column>
<span>Country</span>
</th>
<th md-column>
<span>Phone</span>
</th>
<th md-column>
<span>Fax</span>
</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="cust in customers| filter: filter.search | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit">
<td md-cell>{{cust.Id}}</td>
<td md-cell>{{cust.CompanyName}}</td>
<td md-cell>{{cust.ContactName}}</td>
<td md-cell>{{cust.ContactTitle}}</td>
<td md-cell>{{cust.Address}}</td>
<td md-cell>{{cust.City}}</td>
<td md-cell>{{cust.PostalCode}}</td>
<td md-cell>{{cust.Country}}</td>
<td md-cell>{{cust.Phone}}</td>
<td md-cell>{{cust.Fax}}</td>
</tr>
</tbody>
</table>
</md-table-container>
<md-table-pagination md-limit="query.limit" md-limit-options="limitOptions" md-page="query.page" md-total="{{customers.length}}" md-page-select="options.pageSelect" md-boundary-links="options.boundaryLinks" md-on-paginate="logPagination"></md-table-pagination>
</md-card>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="https://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.js"></script>
</body>
</html>
app.js
'use
strict'
var app = angular.module('myApp', ['ngMaterial', 'md.data.table'])
.config(['$mdThemingProvider', function ($mdThemingProvider) {
'use strict';
$mdThemingProvider.theme('primary')
.primaryPalette('blue');
}])
.controller('myController', ['$mdEditDialog', '$q', '$scope', '$timeout', '$http', '$interval', function ($mdEditDialog, $q, $scope, $timeout, $http, $interval) {
$scope.selected = [];
$scope.limitOptions = [5, 10, 15];
$scope.customers = [];
$scope.options = {
rowSelection: true,
multiSelect: true,
autoSelect: true,
decapitate: false,
largeEditDialog: false,
boundaryLinks: false,
limitSelect: true,
pageSelect: true
};
$scope.query = {
order: 'Id',
limit: 5,
page: 1
};
$scope.loadData = function () {
$http.get('http://northwind.servicestack.net/customers.json').success(function (response) {
debugger;
$scope.customers =
response.Customers;
}).error(function (error) {
alert(JSON.stringify(error));
})
}
$interval(function () {
$scope.promise = $timeout(function () {
$http.get('http://northwind.servicestack.net/customers.json').success(function (response) {
debugger;
$scope.customers =
response.Customers;
}).error(function (error) {
alert(JSON.stringify(error));
})
}, 2000);
}, 10000);
$scope.toggleLimitOptions = function () {
$scope.limitOptions = $scope.limitOptions ?
undefined : [5, 10, 15];
};
$scope.loadStuff = function () {
$scope.promise = $timeout(function () {
// loading
}, 2000);
}
$scope.logItem = function (item) {
console.log(item.name, 'was selected');
};
$scope.logOrder = function (order) {
console.log('order: ', order);
};
$scope.logPagination = function (page, limit) {
console.log('page: ', page);
console.log('limit: ', limit);
}
}])
Screen Shot
