css - 如何覆盖已排序数据表的样式？

Question

我基本上是想弄清楚如何更改数据表中这个特定元素的样式

这里是 HTML:

<table id="oldFornitures" class="table" datatable="ng" dt-options="dtOptions" >
                <thead>
                    <tr>
                        <th class="col-order">{{'POD' | translate}}</th>

这里是 dtOptions:

$scope.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('bFilter', false)
            .withOption('responsive', true)
            .withOption('sScrollY','40vh')
            .withOption('sScrollCollapse', true)
            .withOption('sScrollX', 'auto')
            .withLanguage({ "sEmptyTable": "Nessuna fornitura presente","sInfoEmpty" : ""})
            .withOption('bPaginate', false);

这是让我们看到标题中列顺序的图像，我想用另一种样式替换它

这怎么可能？

Answer 1

要更改排序图标的样式(图像)，您需要更改自动生成的数据表类，您可以在“检查元素”时弄清楚。

自动生成的类包括:

sorting
sorting_asc
sorting_desc

根据您的代码示例:

.table thead th.sorting {
    background-image: url(sort.png); //path of the image you want
}

.table thead th.sorting_asc {
    background-image: url(sort_asc.png); //path of the image you want

}