Dependencies
The required dependencies are:
- AngularJS version 1.3.0+
- JQuery version 1.11.0+
- DataTables 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+
Download
Manually
The files can be downloaded on GitHub.
With Bower
Installation
Include the JS file in your index.html
file:
You must include the JS file in this order. AngularJS MUST use jQuery
and not its jqLite
!
Declare dependencies on your module app like this:
Additional Notes
- RequireJS is not supported.
-
Each time a datatable is rendered, a message is sent to the parent scopes with the id of the table and the DataTable itself.
For instance, for the given dataTable:You can catch the event like this in your parent directive or controller:
$scope.$on('event:dataTableLoaded', function(event, loadedDT) { // loadedDT === {"id": "foobar", "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 }); -
Angular DataTables
is usingObject.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 DataTables
will resolve every promises (except the attributesdata
andaaData
) 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 optionautoWidth
set tofalse
.