Getting started

Dependencies

The required dependencies are:

This module has been tested with the following datatables modules:


Download

Manually

The files can be downloaded on  GitHub.

With Bower

$ bower install angular-datatables

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:

angular.module('myModule', ['datatables']);

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 or DTInstance.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": "foobar2", "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 DataTables is 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 DataTables will resolve every promises (except the attributes data, aaData and fnPromise) 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.