由于表格背景而隐藏的 Jquery Datatable 图标答案

【问题标题】：Jquery Datatable Icon hidden because of table background由于表格背景而隐藏的 Jquery Datatable 图标
【发布时间】：2017-09-02 16:10:27
【问题描述】：

我使用下面的 css 作为表格标题，因为我使用图像作为标题颜色，所以排序图标在它后面。如何在图像顶部显示排序图标？

th {
  background: url(https://jackrugile.com/images/misc/noise-diagonal.png), 
  linear-gradient(#777, #444) !important;
  border-left: 1px solid #555 !important;
  border-right: 1px solid #777 !important;
  border-top: 1px solid #555 !important;
  border-bottom: 1px solid #333 !important;
  box-shadow: inset 0 1px 0 #999 !important;
  color: #fff !important;
  font-weight: bold !important;
  padding: 10px 15px !important;
  position: relative !important;
  text-shadow: 0 1px 0 #000 !important;
  line-height: 14px !important;
}

我尝试了以下 css 但没有运气：

table.dataTable thead span.sort-icon {
 display: inline-block!important;
 padding-left: 5px!important;
 width: 16px!important ;
 height: 16px!important    

}

 table.dataTable thead .sorting span { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_both.png') no-repeat center right!important; }
 table.dataTable thead .sorting_asc span { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc.png') no-repeat center right!important; }
 table.dataTable thead .sorting_desc span { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc.png') no-repeat center right!important; }

【问题讨论】：

标签： jquery css datatables

【解决方案1】：

不，如果您使用默认样式 DataTable，排序图标不在其后面。实际上，您正在用背景图像覆盖排序图标，因为在默认样式下，排序图像是背景图像 - 因此没有内容概念。

所以如果你想自定义header，你应该使用styling extension for dataTable。

下面的sn-p使用的是jQuery UI styling

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

th {
  background: url(https://jackrugile.com/images/misc/noise-diagonal.png), linear-gradient(#777, #444) !important;
  color: #fff !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/v/ju-1.11.4/jq-2.2.4/dt-1.10.15/datatables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/v/ju-1.11.4/jq-2.2.4/dt-1.10.15/datatables.min.js"></script>
<table id="example" class="display" cellspacing="0" 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>
  <tbody>
    <tr>
      <td>Michael Bruce</td>
      <td>Javascript Developer</td>
      <td>Singapore</td>
      <td>29</td>
      <td>2011/06/27</td>
      <td>$183,000</td>
    </tr>
    <tr>
      <td>Donna Snider</td>
      <td>Customer Support</td>
      <td>New York</td>
      <td>27</td>
      <td>2011/01/25</td>
      <td>$112,000</td>
    </tr>
  </tbody>
</table>

【讨论】：