<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="datatablesSampleApp">
<div ng-controller="bootstrapCtrl" class="code">
<table datatable dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered"></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 data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/725b2a2115b/sorting/date-euro.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('bootstrapCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder) {
$scope.dtOptions = DTOptionsBuilder
.fromSource('data.json')
// Add Bootstrap compatibility
.withBootstrap();
$scope.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID').withClass('text-danger'),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
DTColumnBuilder.newColumn('date').withTitle('Date').withOption('sType', 'date-euro')
];
});
})(angular);
[{
"id": 860,
"firstName": "Superman",
"lastName": "Yoda",
"date": "01/03/2014 10:11:10"
}, {
"id": 870,
"firstName": "Foo",
"lastName": "Whateveryournameis",
"date": "01/03/2014 10:12:10"
}, {
"id": 590,
"firstName": "Toto",
"lastName": "Titi",
"date": "04/03/2014 15:30:20"
}]
body {
margin-top: 30px;
width: 97%;
}