angular-datatables

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

Notes

The required dependencies are:

AngularJS (tested with version 1.2.6+)
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 rel="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.
Each time a datatable is rendered, a message is sent to the parent scopes with the id of the table and the DataTable itself.

For instance, for the given dataTable:

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

You can catch the event like this in your parent directive or controller:

$scope.$on('event:dataTableLoaded', function(event, loadedDT) {
    // loadedDT === {"id": "foobar", dt: oTable}
});

License

MIT License

dgageot / angular-datatables