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('datatablesSampleApp', ['datatables']).controller('bootstrapIntegrationCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
$scope.dtOptions = DTOptionsBuilder
.fromSource('data.json')
// Add Bootstrap compatibility
.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']
}
]);
$scope.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID').withClass('text-danger'),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name')
];
});