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:
is the same as writing:
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
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
// 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 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:
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() |
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 |
DTOptions |
withColReorderOption(key, value) |
Add option to the attribute
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 |
DTOptions |
withColVisOption(key, value) |
Add option to the attribute
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 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 |
DTOptions |
withTableToolsOption(key, value) |
Add option to the attribute
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 |
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 |