angular-datatables

Angular module that provides a datatable directive along with datatable options helpers.

Notes

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

Getting started

Download

Manually

The files can be downloaded from:

• Minified JS and CSS for production usage
• Un-minified JS and CSS for development

The CSS file only contains Twitter Bootstrap styles to support datatables.

With Bower

bower install angular-datatables

Installation

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

Usage

See github page.

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 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 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 and aaData) 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.

Contributing

See CONTRIBUTING.

License

MIT License