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:

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

is the same as writing:

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

Helper/Wrapper API Description
DTOptionsBuilder newOptions()

Create a wrapped datatables options.

angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.dtOptions = DTOptionsBuilder.newOptions(); }
DTOptionsBuilder fromSource(sAjaxSource)

Create a wrapped datatables options with initialized ajax source.

angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.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', MyCtrl); function MyCtrl(DTOptionsBuilder, $resource) { var vm = this; vm.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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.dtOptions = DTOptionsBuilder.newOptions() .withOption('fnRowCallback', rowCallback); function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) { console.log(aData); return nRow; } }

which is the same as:

angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl); function MyCtrl() { var vm = this; vm.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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.dtOptions = DTOptionsBuilder.fromSource('data.json'); }
DTOptions withDataProp(sAjaxDataProp)
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.
// Get data from { "data": [...] } angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.dtOptions = DTOptionsBuilder.fromSource('data.json') .withDataProp('data'); } // Get data from { "data": { "inner": [...] } } angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.dtOptions = DTOptionsBuilder.fromSource('data.json') .withFnServerData(serverData); function serverData(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:

  • full_numbers - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers
  • full - 'First', 'Previous', 'Next' and 'Last' buttons
  • simple - 'Previous' and 'Next' buttons only
  • simple_numbers - 'Previous' and 'Next' buttons, plus page numbers

See DataTables documentation.

angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.dtOptions = DTOptionsBuilder.fromSource('data.json') .withDisplayLength(2); }
DTOptions withBootstrap()

Add bootstrap compatibility.

angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.dtOptions = DTOptionsBuilder.fromSource('data.json') .withColVis(); // Add a state change function .withColVisStateChange(stateChange); function stateChange(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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.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": "vendor/datatables-tabletools/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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.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', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.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.

DTOptions withColumnFilter()

Add Columnfilter compatibility.

angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl); function MyCtrl(DTOptionsBuilder) { var vm = this; vm.dtOptions = DTOptionsBuilder.fromSource('data.json') .withColumnFilter({ ... }); }