テーブル背景のために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を試みたが、運に：あなたはDataTableのスタイリングデフォルトを使用している場合

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

ませんアイコンの並べ替えは、その背後ではありません。実際には、デフォルトのスタイリングではソートイメージは背景イメージなので、コンテンツの概念はないため、ソートアイコンを背景イメージで上書きしています。

あなたは、ヘッダーをカスタマイズしたいのであれば、あなたは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>

を使用しています