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 CSS, 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>
<link rel="stylesheet" href="angular-datatables.css">

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.

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

col128/angular-datatables