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', MyCtrl);
function MyCtrl(DTOptionsBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions();
}
|
DTOptionsBuilder |
fromSource(ajax) |
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
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 |
fromSource(ajax) |
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
// 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 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:
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
function MyCtrl(DTOptionsBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
.withPaginationType('full_numbers');
}
|
DTOptions |
withLanguageSource(sLanguageSource) |
Set the language source of the datatables. If not defined, it uses the default language set by datatables, ie english. You can find the list of languages in the DataTable official's documentation.
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
function MyCtrl(DTOptionsBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
.withLanguageSource('/path/to/language');
}
|
DTOptions |
withLanguage(oLanguage) |
Set the language of the datatables. If not defined, it uses the default language set by datatables, ie english.
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
function MyCtrl(DTOptionsBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
.withLanguage({
"sEmptyTable": "No data available in table",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ entries",
"sInfoEmpty": "Showing 0 to 0 of 0 entries",
"sInfoFiltered": "(filtered from _MAX_ total entries)",
"sInfoPostFix": "",
"sInfoThousands": ",",
"sLengthMenu": "Show _MENU_ entries",
"sLoadingRecords": "Loading...",
"sProcessing": "Processing...",
"sSearch": "Search:",
"sZeroRecords": "No matching records found",
"oPaginate": {
"sFirst": "First",
"sLast": "Last",
"sNext": "Next",
"sPrevious": "Previous"
},
"oAria": {
"sSortAscending": ": activate to sort column ascending",
"sSortDescending": ": activate to sort column descending"
}
});
}
It is not mandatory to specify every keywords. For example, if you just need to override the keywords
angular.module('myModule', ['datatables']).controller('MyCtrl', MyCtrl);
function MyCtrl(DTOptionsBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
.withLanguage({
"oPaginate": {
"sNext": "»",
"sPrevious": "«"
}
});
}
|
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', 'datatables.bootstrap'])
.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',
'datatables.bootstrap',
'datatables.tabletools',
'datatables.colvis'
]).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() |
angular.module('myModule', ['datatables', 'datatables.colreorder'])
.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:
{
"ajax": "data.json",
"dom": "Rlfrtip"
}
By calling this API, the letter |
DTOptions |
withColReorderOption(key, value) |
Add option to the attribute
angular.module('myModule', ['datatables', 'datatables.colreorder'])
.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:
{
"ajax": "data.json",
"dom": "Rlfrtip",
"oColReorder": {
"iFixedColumnsRight": 1
}
}
|
DTOptions |
withColReorderOrder(aiOrder) |
Set the default column order.
angular.module('myModule', ['datatables', 'datatables.colreorder'])
.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:
{
"ajax": "data.json",
"dom": "Rlfrtip",
"oColReorder": {
"aiOrder": [1, 0, 2]
}
}
|
DTOptions |
withColReorderCallback(fnReorderCallback) |
Set the reorder callback function.
angular.module('myModule', ['datatables', 'datatables.colreorder']])
.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:
{
"ajax": "data.json",
"dom": "Rlfrtip",
"oColReorder": {
"fnReorderCallback": function () {
console.log('Columns order has been changed with: ' + this.fnOrder());
}
}
}
|
DTOptions |
withColVis() |
This extension has been retired and has been replaced by the Button extension. Add ColVis compatibility.
angular.module('myModule', ['datatables', 'datatables.colvis']])
.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:
{
"ajax": "data.json",
"dom": "Clfrtip"
}
By calling this API, the letter |
DTOptions |
withColVisOption(key, value) |
This extension has been retired and has been replaced by the Button extension. Add option to the attribute
angular.module('myModule', ['datatables', 'datatables.colvis']])
.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:
{
"ajax": "data.json",
"dom": "Clfrtip",
"oColVis": {
"aiExclude": [2]
}
}
|
DTOptions |
withColVisStateChange(fnStateChange) |
This extension has been retired and has been replaced by the Button extension. Set the state change function.
angular.module('myModule', ['datatables', 'datatables.colvis'])
.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:
{
"ajax": "data.json",
"dom": "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', 'datatables.tabletools'])
.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 The above code will construct the following DataTables options:
{
"ajax": "data.json",
"dom": "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', 'datatables.tabletools'])
.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:
{
"ajax": "data.json",
"dom": "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', 'datatables.tabletools'])
.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:
{
"ajax": "data.json",
"dom": "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(dom) |
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 |
DTOptions |
withScroller() |
Add Scroller compatibility.
angular.module('myModule', ['datatables', 'datatables.scroller'])
.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:
{
"ajax": "data.json",
"dom": "lfrtipS"
}
By calling this API, the letter |
DTOptions |
withColumnFilter(columnFilterOptions) |
Add Columnfilter compatibility.
angular.module('myModule', ['datatables', 'datatables.columnfilter'])
.controller('MyCtrl', MyCtrl);
function MyCtrl(DTOptionsBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
.withColumnFilter({
...
});
}
|
DTOptions |
withFixedColumns(fixedColumnsOptions) |
Add FixedColumns compatibility.
angular.module('myModule', ['datatables', 'datatables.fixedcolumns'])
.controller('MyCtrl', MyCtrl);
function MyCtrl(DTOptionsBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('scrollY', '300px')
.withOption('scrollX', '100%')
.withOption('scrollCollapse', true)
.withOption('paging', false)
.withFixedColumns({
leftColumns: 1,
rightColumns: 1
});
}
|
DTOptions |
withFixedHeader(fixedHeaderOptions) |
Add FixedHeader compatibility.
angular.module('myModule', ['datatables', 'datatables.fixedheader'])
.controller('MyCtrl', MyCtrl);
function MyCtrl(DTOptionsBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withFixedHeader({
bottom: true
});
}
|
DTOptions |
withButtons(buttonsOptions) |
Add Buttons compatibility.
angular.module('myModule', ['datatables', 'datatables.buttons'])
.controller('MyCtrl', MyCtrl);
function MyCtrl(DTOptionsBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withButtons(['colvis']);
}
|
DTOptions |
withSelect(selectOptions) |
Add Select compatibility.
angular.module('myModule', ['datatables', 'datatables.select'])
.controller('MyCtrl', MyCtrl);
function MyCtrl(DTOptionsBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withSelect(true);
}
|