/angular-datatables

DataTables using angular directives

Primary LanguageHTML

angular-datatables Build Status Built with Grunt Stories in Ready

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

Notes

The required dependencies are:

This module has been tested with the following datatables modules:

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