### `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 `aaData`aaData 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.