search

institut-de-genomique / Ultimate-DataTable

This AngularJS directive generate a HTML table with build-in fonctionnality like save, edit, remove, pagination etc...
http://institut-de-genomique.github.io/Ultimate-DataTable/
45 stars 26 forks source link

readme

Ultimate DataTable

This AngularJS directive generate a HTML table with build-in fonctionnality like save, edit, remove, pagination etc...

Versions

Current stable version : 3.3.1
Latest version : 3.4.0-SNAPSHOT

Demo

Demo

Documentation

Doc

Quick start

Dependencies

The Ultimate DataTable need the folowing components to be fully fonctionnal :

 <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>

HTML

<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>

Javascript

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);
}]);

Licence

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.

The team

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

The logo

Image of UDT Logo