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
• 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

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 use the directive dt-instance where you provide a variable that will be populated with the DataTable instance once it's rendered:

<table id="foobar" datatable dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance"></table>

The dtInstance variable will be populated with the following value:

{
    "id": "foobar",
    "DataTable": oTable,
    "dataTable": $oTable,
    "reloadData": function(callback, resetPaging),
    "changeData": function(newData),
    "rerender": function()
}

DataTable is the DataTable API instance dataTable is the jQuery Object See http://datatables.net/manual/api#Accessing-the-API

For more information, please check the documentation.

• You can also fetch it by calling the service DTInstances.getLast() to fetch the last instance or DTInstance.getList() to fetch the entire list of instances.

These APIs are deprecated. They will be removed in the v0.5.0+. Use the above approach instead.

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": "foobar", "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