Styling filter and pagination controls of angular-datatables using withBootstrapOptions

Question

I'm trying to affect the appearance of the filtering and pagination controls of angular-datatables and found out that it can be done using the withBootstrapOptions of the framework. However, I can't seem to find the option to affect the styling of the pagination buttons, page size entries field, and filter field. All I want to do is to make the height of the input fields and buttons to be smaller. The code below is what I have tried so far:

.withBootstrap()
.withBootstrapOptions({
    TableTools: {
        classes: {
            container: 'btn-group',
            buttons: {
                normal: 'btn btn-danger'
            }
        }
    },
    ColVis: {
        classes: {
            masterButton: 'btn btn-primary'
        }
    },
    pagination: {
        classes: {
            ul: 'xxx',
            li: 'yyy',
            a: 'zzz'
        }
    }
})

I've been trying to add my own classes to the table to do the styling and I was able to set the classes of the ul element to xxx of the pagination control with the code above but when I tried to do it to the li or a element it doesn't work. Is this possible? Can someone please provide me an example of how I can manipulate the filter input field and pagination field/buttons height?

Furthermore, does anyone know where I can find the documentation for all of the available options that I could use with the 'withBootstrapOptions' helper? I can't seem to locate it through my searches.

score 3 · Accepted Answer · answered Nov 01 '16 at 15:33

If you use the developer tools in your browser, angular-datatables already puts classes on the paginate buttons that you can style. To view the developer tools in Chrome, right click on the element and select "inspect element". You should be able to see the available classes to style.

The current paginate button has the class: "paginate_button current". The other buttons have the class "paginate_button".

Using CSS, you should be able to style these any way you want.

For example,

.paginate_button{
 background: #fff;
cursor: pointer;
}
.paginate_button:hover{
  background: #b20000;
}
.paginate_button.current{
  background: #b20000;
}

Put those styles into your page. You should be able to change the padding and margins also. This is going to look much cleaner than trying to change in Javascript.

Styling filter and pagination controls of angular-datatables using withBootstrapOptions

1 Answers1