angular-datatables [](https://travis-ci.org/l-lin/angular-datatables) [](http://gruntjs.com/) [  
================
> 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
---------------
Twitter Bootstrap styles to support datatables.
bower install angular-datatables
`
$3
Include the CSS, JS file in your index.html file:
`html
`
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:
`html
`
Declare dependencies on your module app like this:
`html
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:
`html
`
The dtInstance variable will be populated with the following value:
`json
{
"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:
`js
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`.