Override Bootstrap options
With bootstrap integration, angular-datatables overrides classes so that it uses Bootstrap classes instead of DataTables'.
However, you can also override the classes used by using the helper DTOption.withBootstrapOptions
.
Angular-datatables provides default properties for Bootstrap compatibility.
You can check them out on Github.
angular.module('showcase.overrideBootstrapOptions', ['datatables', 'datatables.bootstrap'])
.controller('WithBootstrapOptionsCtrl', WithBootstrapOptionsCtrl);
function WithBootstrapOptionsCtrl(DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder
.fromSource('data.json')
.withDOM('<\'row\'<\'col-xs-6\'l><\'col-xs-6\'f>r>t<\'row\'<\'col-xs-6\'i><\'col-xs-6\'p>>')
// Add Bootstrap compatibility
.withBootstrap()
.withBootstrapOptions({
TableTools: {
classes: {
container: 'btn-group',
buttons: {
normal: 'btn btn-danger'
}
}
},
ColVis: {
classes: {
masterButton: 'btn btn-primary'
}
},
pagination: {
classes: {
ul: 'pagination pagination-sm'
}
}
})
// 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']
}
]);
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID').withClass('text-danger'),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
];
}