由于表背景隐藏的Jquery Datatable图标

Question

我使用下面的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; }

Answer 1

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

因此，如果您想自定义标题，则应使用styling extension for dataTable。

以下代码段正在使用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>