<!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="sampleCtrl">
<table datatable dt-options="dtOptions" dt-columns="dtColumns">
<thead>
<tr>
<th>22/02/2006</th>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td>01/01/2016</td>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>24/12/2016</td>
<td>Someone</td>
<td>Youknow</td>
</tr>
<tr>
<td>23/12/2017</td>
<td>Iamout</td>
<td>Ofinspiration</td>
</tr>
</tbody>
</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/dev/dist/angular-datatables.min.js"></script>
<script src="script.js"></script>
</body>
</html>
(function(angular) {
'use strict';
angular.module('datatablesSampleApp', ['datatables']).
controller('sampleCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder) {
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"Antt-date-pre": function ( a ) {
if (a == null || a == '') {
return 0;
}
var date = a.split('/');
return Date.parse(date[1] + '/' + date[0] + '/' + date[2])
}
});
$scope.dtColumns = [
DTColumnBuilder
.newColumn(0)
.withTitle('dd/MM/YYYY')
.notSortable()
.withOption('type', 'Antt-date'),
DTColumnBuilder.newColumn(1).withTitle('First name'),
DTColumnBuilder.newColumn(2).withTitle('Last name')
];
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('order', [[0, 'asc']])
.withPaginationType('full_numbers')
});
})(angular);