<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css" />
</head>
<body ng-app="datatablesSampleApp">
<div ng-controller="simpleCtrl" class="code">
<table datatable dt-options="dtOptions" dt-columns="dtColumns"></table>
</div>
<script data-require="jquery@1.10.1" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" data-require="angular.js@1.2.15" data-semver="1.2.15" src="http://code.angularjs.org/1.2.15/angular.js"></script>
<script type="text/javascript" src="https://rawgithub.com/l-lin/angular-datatables/master/dist/angular-datatables.min.js"></script>
<script src="script.js"></script>
</body>
</html>
(function(angular) {
'use strict';
angular.module('datatablesSampleApp', ['datatables']).
controller('simpleCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder) {
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('ajax', {
url: 'data.json',
type: 'GET'
})
.withDataProp('data')
.withOption('serverSide', true)
.withOption('processing', true)
.withOption('order', [[0, 'asc'], [1, 'asc']])
.withPaginationType('full_numbers');
$scope.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
];
});
})(angular);
{
"draw": 1,
"recordsTotal": 3,
"recordsFiltered": 3,
"data": [{
"id": 860,
"firstName": "Superman",
"lastName": "Yoda"
}, {
"id": 870,
"firstName": "Foo",
"lastName": "Whateveryournameis"
}, {
"id": 590,
"firstName": "Toto",
"lastName": "Titi"
}]
}