jQuery / DataTables: how to change pagination color

Question

I am using the jQuery DataTables plugin (version 1.9.4) and would like to change the color of the pagination.

With CSS I am able to change their background color but I couldnt find a way to change the font color and font hover color for the anchor tags. I would like to change both font color and hover font color for all the below anchor tags to white (#FFFFFF).

The pagination code looks as follows:

<div id="myTable_paginate" class="dataTables_paginate paging_full_numbers">
    <a id="myTable_first" class="first paginate_button paginate_button_disabled" tabindex="0">First</a>
    <a id="myTable_previous" class="previous paginate_button paginate_button_disabled" tabindex="0">Previous</a>
    <span>
        <a class="paginate_active" tabindex="0">1</a>
        <a class="paginate_button" tabindex="0">2</a>
    </span>
    <a id="myTable_next" class="next paginate_button" tabindex="0">Next</a>
    <a id="myTable_last" class="last paginate_button" tabindex="0">Last</a>
</div>

Thanks for any help with this, Tim.

inspect each element in browser console , can see all rules that apply and live edit them. Find what works and copy to file — charlietfl, Nov 24 '13 at 23:35

score 7 · Accepted Answer · answered Nov 25 '13 at 10:29

7

Maybe you miss the !important declaration? In this case it is indeed important.

.paging_full_numbers a.paginate_button {
    color: #fff !important;
}
.paging_full_numbers a.paginate_active {
    color: #fff !important;
}

jsfiddle -> http://jsfiddle.net/CrBkT/

answered Nov 25 '13 at 10:29

davidkonrad

83,997
17
205
265

1

Awesome - I would never have thought of that and it works. Thanks a lot ! :) – user2571510 Nov 25 '13 at 15:06

score 6 · Answer 2 · answered Mar 23 '19 at 21:06

after a bit of messing about this is what i got to work;

    .page-item.active .page-link {
        color: #fff !important;
        background-color: #000 !important;
        border-color: #000 !important; 
    }

    .page-link {
        color: #000 !important;
        background-color: #fff !important;
        border: 1px solid #dee2e6 !important; 
    }

    .page-link:hover {
        color: #fff !important;
        background-color: #000 !important;
        border-color: #000 !important; 
    }

score 0 · Answer 3 · answered Sep 21 '18 at 17:57

0

Another answer is here:

$.fn.dataTable.ext.classes.sPageButton = 'your class';

answered Sep 21 '18 at 17:57

Mohsen

323
1
6
15

jQuery / DataTables: how to change pagination color

3 Answers3

Linked