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+
- ColumnFilter with version 1.5.6
- FixedColumns with version 3.0.2
- FixedHeader with version 2.1.2
- Responsive with version 1.0.1
- Scroller with version 1.2.2
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.
-
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 example, for the given dataTables:
You can fetch the instances like this:
DTInstances.getLast().then(function(lastDTInstance) { // lastDTInstance === {"id": "foobar2", "DataTable": oTable, "dataTable": $oTable, "reloadData": fnReloadData, "changeData": fnChangeData} // 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": "foobar", "DataTable": oTable, "dataTable": $oTable, "reloadData": fnReloadData, "changeData": fnChangeData}, * "foobar2": {"id": "foobar2", "DataTable": oTable, "dataTable": $oTable, "reloadData": fnReloadData, "changeData": fnChangeData} * } */ });For more information, please check the documentation.
-
Angular DataTablesis 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 DataTableswill resolve every promises (except the attributesdata,aaDataandfnPromise) 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
fnThatReturnsAPromisewill first be resolved and then the DataTable will be rendered with the optionautoWidthset tofalse.