s001dxp / angular-datatables

DataTables using angular directives

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.

• 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