DTOptionsBuilder

This service will help you build your datatables options.

 Keep in mind that those helpers are NOT mandatory (except when using promise to fetch the data or using Bootstrap integration). You can also provide the DataTable options directly.

For instance, the following code:

$scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withDisplayLength(2);

is the same as writing:

$scope.dtOptions = { paginationType: 'full_numbers', displayLength: 2 };

Helper/Wrapper API Description
DTOptionsBuilder newOptions()

Create a wrapped datatables options.

angular.module('myModule', ['datatables']) .controller('myCtrl', function($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.newOptions(); });
DTOptionsBuilder fromSource(sAjaxSource)

Create a wrapped datatables options with initialized ajax source.

angular.module('myModule', ['datatables']) .controller('myCtrl', function($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json'); });
DTOptionsBuilder fromFnPromise(fnPromise)

Create a wrapped datatables options with a function that returns a promise

angular.module('myModule', ['datatables', 'ngResource']) .controller('myCtrl', function($scope, DTOptionsBuilder, $resource) { $scope.dtOptions = DTOptionsBuilder.fromFnPromise(function() { return $resource('data.json').query().$promise; }); });
DTOptions withOption(key, value)

This API is used to add additional option to the DataTables options.

Add an option to the wrapped datatables options. For example, the following code add the option fnRowCallback:

angular.module('myModule', ['datatables']) .controller('myCtrl', function($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.newOptions() .withOption('fnRowCallback', function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { console.log(aData); return nRow; }); });

which is the same as:

angular.module('myModule', ['datatables']).controller('myCtrl', function($scope) { $scope.dtOptions = { 'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { console.log(aData); return nRow; }; });
DTOptions withSource(sAjaxSource)

Set the ajax source.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json'); });
DTOptions withDataProp(sAjaxDataProp)

Set the Ajax properties. It's only compatible with DataTables v1.9.4

By default DataTables will look for the property aaDataaaData when obtaining data from an Ajax source or for server-side processing - this parameter allows that property to be changed. You can use Javascript dotted object notation to get a data source for multiple levels of nesting.

See DataTables documentation.

// Get data from { "data": [...] } angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withDataProp('data'); }); // Get data from { "data": { "inner": [...] } } angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withDataProp('data.inner'); });
DTOptions withFnServerData(fn)

This API allows you to override the default function to retrieve the data (which is $.getJSON according to DataTables documentation) to something more suitable for you application.

It's mainly used for Datatables v1.9.4. See DataTable documentation.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withFnServerData(function (sSource, aoData, fnCallback, oSettings) { oSettings.jqXHR = $.ajax( { 'dataType': 'json', 'type': 'POST', 'url': sSource, 'data': aoData, 'success': fnCallback }); });
DTOptions withPaginationType(sPaginationType)

Set the pagination type of the datatables:

  • two_buttons (only available for v1.9.4)
  • full_numbers - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers
  • full - 'First', 'Previous', 'Next' and 'Last' buttons (available for v1.10+)
  • simple - 'Previous' and 'Next' buttons only (available for v1.10+)
  • simple_numbers - 'Previous' and 'Next' buttons, plus page numbers (available for v1.10+)

See DataTables 1.9.4 documentation or DataTables 1.10+ documentation.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withPaginationType('full_numbers'); });
DTOptions withLanguage(oLanguage)

Set the language of the datatables. If not defined, it uses the default language set by datables, ie english.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withLanguage({ sUrl: '/path/to/language' }); });
DTOptions withDisplayLength(iDisplayLength)

Set the number of items per page to display.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withDisplayLength(2); });
DTOptions withBootstrap()

Add bootstrap compatibility.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withBootstrap(); });
DTOptions withBootstrapOptions(oBootstrapOptions)

Override Bootstrap options. It's mainly used to override CSS classes used for Bootstrap compatibility.

Angular datatables provides default options. You can check them out on Github.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withBootstrap() // Overriding the classes .withBootstrapOptions({ TableTools: { classes: { container: 'btn-group', buttons: { normal: 'btn btn-danger' } } }, ColVis: { classes: { masterButton: 'btn btn-primary' } } }) // Add ColVis compatibility .withColVis() // Add Table tools compatibility .withTableTools('vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf') .withTableToolsButtons([ 'copy', 'print', { 'sExtends': 'collection', 'sButtonText': 'Save', 'aButtons': ['csv', 'xls', 'pdf'] } ]); });
DTOptions withColReorder()

Add ColReorder compatibility.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withColReorder(); });

The above code will construct the following DataTables options:

{ "sAjaxSource": "data.json", "sDom": "Rlfrtip" }

 By calling this API, the letter R is appended to the DOM positioning.

DTOptions withColReorderOption(key, value)

Add option to the attribute oColReorder.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withColReorder() // Fix last right column .withColReorderOption('iFixedColumnsRight', 1); });

The above code will construct the following DataTables options:

{ "sAjaxSource": "data.json", "sDom": "Rlfrtip", "oColReorder": { "iFixedColumnsRight": 1 } }
DTOptions withColReorderOrder(aiOrder)

Set the default column order.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withColReorder() // Set order .withColReorderOrder([1, 0, 2]); });

The above code will construct the following DataTables options:

{ "sAjaxSource": "data.json", "sDom": "Rlfrtip", "oColReorder": { "aiOrder": [1, 0, 2] } }
DTOptions withColReorderCallback(fnReorderCallback)

Set the reorder callback function.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withColReorder() .withColReorderCallback(function() { console.log('Columns order has been changed with: ' + this.fnOrder()); }); });

The above code will construct the following DataTables options:

{ "sAjaxSource": "data.json", "sDom": "Rlfrtip", "oColReorder": { "fnReorderCallback": function() { console.log('Columns order has been changed with: ' + this.fnOrder()); } } }
DTOptions withColVis()

Add ColVis compatibility.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withColVis(); });

The above code will construct the following DataTables options:

{ "sAjaxSource": "data.json", "sDom": "Clfrtip" }

 By calling this API, the letter C is appended to the DOM positioning.

DTOptions withColVisOption(key, value)

Add option to the attribute oColVis.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withColVis(); // Exclude the column index 2 from the list .withColVisOption('aiExclude', [2]); });

The above code will construct the following DataTables options:

{ "sAjaxSource": "data.json", "sDom": "Clfrtip", "oColVis": { "aiExclude": [2] } }
DTOptions withColVisStateChange(fnStateChange)

Set the state change function.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withColVis(); // Add a state change function .withColVisStateChange(function(iColumn, bVisible) { console.log('The column' + iColumn + ' has changed its status to ' + bVisible) }); });

The above code will construct the following DataTables options:

{ "sAjaxSource": "data.json", "sDom": "Clfrtip", "oColVis": { "fnStateChange": function(iColumn, bVisible) { console.log('The column' + iColumn + ' has changed its status to ' + bVisible) } } }
DTOptions withTableTools(sSwfPath)

Add TableTools compatibility.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withTableTools('vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf') });

 You must provide a valid path to the SWF file (which is provided by the TableTools plugin).

The above code will construct the following DataTables options:

{ "sAjaxSource": "data.json", "sDom": "Tlfrtip", "oTableTools": { "sSwfPath": "vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf" } }

 By calling this API, the letter T is appended to the DOM positioning.

DTOptions withTableToolsOption(key, value)

Add option to the attribute oTableTools.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withTableTools('vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf') // Single row selection at a time .withTableTools('sRowSelect', 'single'); });

The above code will construct the following DataTables options:

{ "sAjaxSource": "data.json", "sDom": "Tlfrtip", "oTableTools": { "sSwfPath": "vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf", "sRowSelect": "single" } }
DTOptions withTableToolsButtons(aButtons)

Set the table tools buttons to display.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withTableTools('vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf') // Single row selection at a time .withTableToolsButtons([ 'copy', 'print', { 'sExtends': 'collection', 'sButtonText': 'Save', 'aButtons': ['csv', 'xls', 'pdf'] } ]); });

The above code will construct the following DataTables options:

{ "sAjaxSource": "data.json", "sDom": "Tlfrtip", "oTableTools": { "sSwfPath": "https://github.com/DataTables/TableTools/raw/master/swf/copy_csv_xls_pdf.swf", "aButtons": [ 'copy', 'print', { 'sExtends': 'collection', 'sButtonText': 'Save', 'aButtons': ['csv', 'xls', 'pdf'] } ] } }
DTOptions withDOM(sDom)

Override the DOM positioning of the DataTable.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.newOptions() .withDOM('pitrfl'); });

 By default, the DOM positioning is set to lfrtip.

DTOptions withScroller()

Add Scroller compatibility.

angular.module('myModule', ['datatables']) .controller('myCtrl', function ($scope, DTOptionsBuilder) { $scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withScroller(); });

The above code will construct the following DataTables options:

{ "sAjaxSource": "data.json", "sDom": "lfrtipS" }

 By calling this API, the letter S is appended to the DOM positioning.