Customizing pagination with Datatables

Question

I used Datatables and I want to customize the pagination to the color I want to match the theme of my page.

This is the default view.

I have tried different methods, like using the same class done in datatables and use !important. It worked but did not show what I intended to do.

What I want when active and also when in :hover state:

background-color: black;
color: white;

Thanks a lot for the help!

Mitali · Accepted Answer · 2016-02-25 08:06:23Z

1

put below css in your style

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    background: rgba(0,0,0,1) !important;
    color:#fff !important;
}

answered Feb 25, 2016 at 8:06

Mitali

1661 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mitali Over a year ago

check if you have added color property with !important somewhere else. if you are using firefox and firebug then you can inspect the element and check in computed tab, which class is actually responsible for the color.

kcNeko Over a year ago

yes i added !important. however I saw in the datatable.css file. it has color: black !important.

Mitali Over a year ago

you can use the same class structure as datatable.css to override it

kcNeko Over a year ago

still doesn't work. But thanks anyways! You're a huge help.

Collectives™ on Stack Overflow

Customizing pagination with Datatables

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related