jQuery / DataTables：如何更改分页颜色

Posted 2023-05-07

【中文标题】jQuery / DataTables：如何更改分页颜色

【英文标题】：jQuery / DataTables: how to change pagination color

【发布时间】：2013-12-09 13:19:18

【问题描述】：

我正在使用 jQuery DataTables 插件（版本 1.9.4）并想更改分页的颜色。

使用 CSS 我可以更改它们的背景颜色，但我找不到更改锚标记的字体颜色和字体悬停颜色的方法。我想将以下所有锚标记的字体颜色和悬停字体颜色都更改为白色（#FFFFFF）。

分页代码如下：

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

感谢您对此提供的任何帮助，蒂姆。

【问题讨论】：

检查浏览器控制台中的每个元素，可以看到所有适用的规则并实时编辑它们。找出有效的方法并复制到文件中

谢谢 - 我该怎么做？

【参考方案1】：

也许您错过了!important 声明？在这种情况下，它确实很重要。

.paging_full_numbers a.paginate_button 
    color: #fff !important;

.paging_full_numbers a.paginate_active 
    color: #fff !important;

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

【讨论】：

太棒了——我从来没有想过它会起作用。非常感谢 ！ :)

【参考方案2】：

在搞砸了这件事之后，我开始工作了；

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

【参考方案3】：

另一个答案是here：

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