This AngularJS directive generate a HTML table with build-in fonctionnality like save, edit, remove, pagination etc...
Current stable version : 3.3.1
Latest version : 3.4.0-SNAPSHOT
The Ultimate DataTable need the folowing components to be fully fonctionnal :
- The Ultimate DataTable js file
- The Ultimate DataTable css file
- AngularJS
- Jquery
- Bootstrap CSS and Javascript (3.x)
- Font Awesome
- MomentJS If you use dates
<link rel="stylesheet" href="http://institut-de-genomique.github.io/Ultimate-DataTable/js/bootstrap/css/bootstrap-3.3.4.min.css">
<link rel="stylesheet" href="http://institut-de-genomique.github.io/Ultimate-DataTable/js/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http://institut-de-genomique.github.io/Ultimate-DataTable/css/ultimate-datatable-3.2.1.css">
<script src="http://institut-de-genomique.github.io/Ultimate-DataTable/js/jquery/jquery_1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://institut-de-genomique.github.io/Ultimate-DataTable/js/bootstrap/js/bootstrap-3.3.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://institut-de-genomique.github.io/Ultimate-DataTable/js/angular-js/angular-1.3.16.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://institut-de-genomique.github.io/Ultimate-DataTable/js/momentjs.js" type="text/javascript" charset="utf-8"></script>
<script src="http://institut-de-genomique.github.io/Ultimate-DataTable/js/ultimate-datatable-3.3.0.js" type="text/javascript" charset="utf-8"></script>
<body ng-app="ngAppDemo">
<div class="container-fluid">
<div class="row">
<h1 align=center>Simple Ultimate DataTable exemple</h1><br>
<div ng-controller="ngAppDemoController">
<div class="col-md-12 col-lg-12" ultimate-datatable="datatable">
</div>
</div>
</div>
</div>
</body>
angular.module('ngAppDemo', ['ultimateDataTableServices']).controller('ngAppDemoController', ['$scope','datatable',function($scope,datatable) {
//Simple example of configuration
var datatableConfig = {
"name":"simple_datatable",
"columns":[
{
"header":"test",
"property":"test",
"order":true,
"type":"text",
"edit":true
},
{
"header":"test2",
"property":"test2",
"order":true,
"type":"text"
}
],
"edit":{
"active":true,
"columnMode":true
},
"pagination":{
"mode":'local'
},
"order":{
"mode":'local'
},
"remove":{
"active":true,
"mode":'local'
}
};
//Simple exemple of data
var datatableData = [{"test":1, "test2":1000},{"test":1, "test2":1000},{"test":1, "test2":1000},
{"test":1, "test2":1000},{"test":1, "test2":1000},{"test":1, "test2":1000},
{"test":1, "test2":1000}];
//Init the datatable with his configuration
$scope.datatable = datatable(datatableConfig);
//Set the data to the datatable
$scope.datatable.setData(datatableData);
}]);
Ultimate DataTable is distributed open-source under CeCILL FREE SOFTWARE LICENSE. Check out http://www.cecill.info/ for more information about the contents of this license.
Ultimate DataTable creator is : Albini Guillaume
Ultimate DataTable developpers are : Albini Guillaume, Deshayes Yann, Nicolza Xavier, Jacoby Ekrame, Gas Shahinaz, Haquelle Maud, Dos-Santos Fernando, Margetic Vesna, Samair Sumitta