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
– charlietfl, Commented Nov 24, 2013 at 23:35

davidkonrad · Accepted Answer · 2013-11-25 10:29:22Z

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, 2013 at 10:29

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

1 Comment

user2571510 Over a year ago

Awesome - I would never have thought of that and it works. Thanks a lot ! :)

Scott M · Accepted Answer · 2019-03-23 21:06:38Z

7

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; 
    }

answered Mar 23, 2019 at 21:06

Scott M

711 silver badge2 bronze badges

Comments

Mohsen · Accepted Answer · 2018-09-21 17:57:27Z

0

Another answer is here:

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

answered Sep 21, 2018 at 17:57

Mohsen

3431 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery / DataTables: how to change pagination color

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related