Angular module that provides a
datatabledirective along with datatable options helpers.
The required dependencies are:
- AngularJS (tested with version 1.3.0+)
- jQuery (tested with version 1.11.0)
- Datatables (tested with version 1.10+)
This module has been tested with the following datatables modules:
- ColReorder with version 1.1.0
- ColVis with version 1.1.0
- TableTools with version 2.2.0
This module also has a Twitter Bootstrap support (tested with version 3.1.1).
Manually
The files can be downloaded from:
The CSS file only contains
Twitter Bootstrapstyles to support datatables.
With Bower
bower install angular-datatables
Include the JS file in your index.html file:
<script src="jquery.min.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-datatables.min.js"></script>IMPORTANT: You must include the JS in this order. AngularJS MUST use jQuery and not its jqLite!
If you want the Twitter Bootstrap support, then add the CSS file:
<link href="datatables.bootstrap.min.css" rel="stylesheet">Declare dependencies on your module app like this:
angular.module('myModule', ['datatables']);See github page.
- RequireJS is not supported.
- A DataTable directive instance is created each time a DataTable is rendered. You can fetch it by calling the service
DTInstances.getLast()to fetch the last instance orDTInstance.getList()to fetch the entire list of instances.
For instance, for the given dataTables:
<table id="foobar" datatable dt-options="dtOptions" dt-columns="dtColumns"></table>
<table id="foobar2" datatable dt-options="dtOptions" dt-columns="dtColumns"></table>You can fetch the instances like this:
DTInstances.getLast().then(function(lastDTInstance) {
// lastDTInstance === {"id": "foobar2", "DataTable": oTable, "dataTable": $oTable}
// loadedDT.DataTable is the DataTable API instance
// loadedDT.dataTable is the jQuery Object
// See http://datatables.net/manual/api#Accessing-the-API
});
DTInstances.getList().then(function(dtInstances) {
/*
* dtInstances === {
* "foobar": {"id": "foobar2", "DataTable": oTable, "dataTable": $oTable},
* "foobar2": {"id": "foobar2", "DataTable": oTable, "dataTable": $oTable}
* }
*/
});For more information, please check the documentation.
-
Angular Datatablesis using Object.create() to instanciate options and columns.- If you need to support IE8, then you need to add this Polyfill.
-
When providing the DT options,
Angular DataTableswill resolve every promises (except the attributesdataandaaData) before rendering the DataTable.
For example, suppose we provide the following code:
angular.module('yourModule')
.controller('MyCtrl', MyCtrl);
function MyCtrl($q, DTOptionsBuilder) {
var vm = this;
vm.dtOptions = DTOptionBuilder.newOptions()
.withOptions('autoWidth', fnThatReturnsAPromise);
function fnThatReturnsAPromise() {
var defer = $q.defer();
defer.resolve(false);
return defer.promise;
}
}The fnThatReturnsAPromise will first be resolved and then the DataTable will be rendered with the option autoWidth set to false.
See CONTRIBUTING.