如何修改DataTables分页中激活按钮的样式

架构老林

2026-6-28

修改DataTables分页当前激活按钮背景色问题

我想修改DataTables分页菜单中当前激活页面按钮的背景色，将其高亮为非默认蓝色，效果接近非禁用按钮的hover状态。但2020年管理员提供的示例以及Stack Overflow上的旧方案都已失效，自己尝试的多段CSS代码也无法生效。以下是我的使用环境和尝试过的代码：

使用环境

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" />

<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

浏览器：Version 120.0.6099.216 (Official Build) (arm64)

尝试的代码

JavaScript代码

$(document).ready( function () {
  var table = $('#example').DataTable();
} );

CSS代码（均无效）

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

.page-link:hover {
    color: #fff !important;
    background-color: #063970 !important;
    border-color: #063970 !important; 
}
/* 无效 */
.page-link:active {
    color: #fff !important;
    background-color: red !important;
    border-color: red !important; 
}
/* 无效 */
.page-link.current {
    color: #fff !important;
    background-color: red !important;
    border-color: red !important; 
}
/* 来自DataTables论坛方案，无效 */
.dataTables_paginate .paginate_button.current {
    background: red !important;
    color: #fff;
    border: 1px solid #dee2e6; 
}

/* 评论区方案，无效 */
.paginate_button.active > .page_link { background-color: #063970; }

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet"
              href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
              rel="stylesheet"
              integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
              crossorigin="anonymous" />
        <script src="https://code.jquery.com/jquery-3.6.3.min.js"
                integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
                crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
                integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
                crossorigin="anonymous"></script>
        <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
        <meta charset=utf-8 />
        <title>DataTables - JS Bin</title>
    </head>
    <body>
        <div class="container">
            <table id="example" class="display nowrap" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011/04/25</td>
                        <td>$3,120</td>
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Director</td>
                        <td>Edinburgh</td>
                        <td>63</td>
                        <td>2011/07/25</td>
                        <td>$5,300</td>
                    </tr>
                    <tr>
                        <td>Ashton Cox</td>
                        <td>Technical Author</td>
                        <td>San Francisco</td>
                        <td>66</td>
                        <td>2009/01/12</td>
                        <td>$4,800</td>
                    </tr>
                    <tr>
                        <td>Cedric Kelly</td>
                        <td>Javascript Developer</td>
                        <td>Edinburgh</td>
                        <td>22</td>
                        <td>2012/03/29</td>
                        <td>$3,600</td>
                    </tr>
                    <tr>
                        <td>Jenna Elliott</td>
                        <td>Financial Controller</td>
                        <td>Edinburgh</td>
                        <td>33</td>
                        <td>2008/11/28</td>
                        <td>$5,300</td>
                    </tr>
                    <tr>
                        <td>Brielle Williamson</td>
                        <td>Integration Specialist</td>
                        <td>New York</td>
                        <td>61</td>
                        <td>2012/12/02</td>
                        <td>$4,525</td>
                    </tr>
                    <tr>
                        <td>Herrod Chandler</td>
                        <td>Sales Assistant</td>
                        <td>San Francisco</td>
                        <td>59</td>
                        <td>2012/08/06</td>
                        <td>$4,080</td>
                    </tr>
                    <tr>
                        <td>Rhona Davidson</td>
                        <td>Integration Specialist</td>
                        <td>Edinburgh</td>
                        <td>55</td>
                        <td>2010/10/14</td>
                        <td>$6,730</td>
                    </tr>
                    <tr>
                        <td>Rhona Davidson</td>
                        <td>Integration Specialist</td>
                        <td>Edinburgh</td>
                        <td>55</td>
                        <td>2010/10/14</td>
                        <td>$6,730</td>
                    </tr>
                    <tr>
                        <td>Rhona Davidson</td>
                        <td>Integration Specialist</td>
                        <td>Edinburgh</td>
                        <td>55</td>
                        <td>2010/10/14</td>
                        <td>$6,730</td>
                    </tr>
                    <tr>
                        <td>Rhona Davidson</td>
                        <td>Integration Specialist</td>
                        <td>Edinburgh</td>
                        <td>55</td>
                        <td>2010/10/14</td>
                        <td>$6,730</td>
                    </tr>
                    <tr>
                        <td>Rhona Davidson</td>
                        <td>Integration Specialist</td>
                        <td>Edinburgh</td>
                        <td>55</td>
                        <td>2010/10/14</td>
                        <td>$6,730</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

解决方案

由于你使用的是DataTables结合Bootstrap 5的样式，当前激活的分页按钮会在父元素.paginate_button上添加active类，内部的链接元素是.page-link。需要使用优先级足够的选择器覆盖默认样式：

.dataTables_paginate .paginate_button.active .page-link {
    color: #fff !important;
    background-color: #063970 !important;
    border-color: #063970 !important;
}

该选择器精准定位到激活状态下的.page-link元素，优先级足以覆盖Bootstrap和DataTables的默认样式，实现与hover状态一致的高亮效果。

内容的提问来源于stack exchange，提问作者roganjosh

如何修改DataTables分页中激活按钮的样式

使用环境 #

尝试的代码 #

JavaScript代码 #

CSS代码（均无效） #

HTML代码 #