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.9.4 and 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="angular-datatables.min.js"></script>

IMPORTANT: You must include the JS AFTER jQuery and DataTables!

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

• This module does not support multiple datatables in the same page (YET)! You can do it, but expect some side effects!
• Each time a datatable is rendered, a message is sent to the parent scopes with the id of the table.

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"}
});

License

MIT License