更改数据表分页中活动按钮的样式

问题描述 投票：0回答：1

我正在尝试更改分页菜单上活动页面的背景颜色

dataTables
。 在将其作为骗局关闭之前，请首先注意，2020 年管理员给出的示例似乎已损坏：https://datatables.net/forums/discussion/comment/177385#Comment_177385（他们的可编辑示例在这里： https://live.datatables.net/wujasupi/2/edit）

接下来，还有这些问答：

  1. 如何更改数据表中分页按钮的默认悬停样式（答案确实覆盖了活动按钮）
  2. DataTable分页页面选择颜色

还有其他我不想列出的内容，因为它们都早于这个明显的破坏性变化。当我检查按钮本身时，我发现完整分页行如下：

<div class="row">
    <div class="col-sm-12 col-md-5"></div>
    <div class="col-sm-12 col-md-7">
        <div class="dataTables_paginate paging_simple_numbers"
             id="suppliersTable_paginate">
            <ul class="pagination">
                <li class="pagination-sm previous disabled" id="suppliersTable_previous">
                    <a aria-controls="suppliersTable"
                       aria-disabled="true"
                       aria-role="link"
                       data-dt-idx="previous"
                       tabindex="0"
                       class="page-link">Previous</a>
                </li>
                <li class="pagination-sm active">
                    <a href="#"
                       aria-controls="suppliersTable"
                       aria-role="link"
                       aria-current="page"
                       data-dt-idx="0"
                       tabindex="0"
                       class="page-link">1</a>
                </li>
                <li class="pagination-sm ">
                    <a href="#"
                       aria-controls="suppliersTable"
                       aria-role="link"
                       data-dt-idx="1"
                       tabindex="0"
                       class="page-link">2</a>
                </li>
                <li class="pagination-sm next" id="suppliersTable_next">
                    <a href="#"
                       aria-controls="suppliersTable"
                       aria-role="link"
                       data-dt-idx="next"
                       tabindex="0"
                       class="page-link">Next</a>
                </li>
            </ul>
        </div>
    </div>
</div>

我承认我的 CSS 不是很强，此时我只是在扔意大利面条。我只是希望当前页面以与标准蓝色不同的颜色突出显示，类似于将鼠标悬停在非禁用按钮上时的情况。这是我的尝试：

$(document).ready( function () {
  var table = $('#example').DataTable();
} );
.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; 
}
/* doesn't work */
.page-link:active {
    color: #fff !important;
    background-color: red !important;
    border-color: red !important; 
}
/* doesn't work */
.page-link.current {
    color: #fff !important;
    background-color: red !important;
    border-color: red !important; 
}
/* From https://datatables.net/forums/discussion/77678/pagination-css-problem doesn't work */
.dataTables_paginate .paginate_button.current {
    background: red !important;
    color: #fff;
    border: 1px solid #dee2e6; 
}

/* From the comments below - doesn't work */
.paginate_button.active > .page_link { background-color: #063970; }
<!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/[email protected]/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/[email protected]/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>

具体版本：

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

浏览器：版本120.0.6099.216（官方版本）（arm64）

javascript jquery css datatables
1个回答
0
投票

@freedomn-m 在评论中回答了这个问题，所以我只是写下他们的解决方案。

最终的解决方案是：

.paginate_button.active > .page-link {
    background-color: red !important;
    border-color: red;
    color: white;
}

有了这个基础，我就可以解决一些小问题了；我实际上使用较小的按钮样式：

<script>
    $.fn.dataTable.ext.classes.sPageButton = 'pagination-sm';
</script>

在这种情况下，解决方案修改如下：

.pagination-sm.active > .page-link {
    background-color: red !important;
    border-color: red;
    color: white;
}

放在一起：

$(document).ready(function() {
  var table = $('#example').DataTable();
});
.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;
}

.paginate_button.active > .page-link {
    background-color: red !important;
    border-color: red;
    color: white;
}
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" />
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>


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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.