DataTables jQuery - 自定义排序箭头答案

【问题标题】：DataTables jQuery - custom sort arrowsDataTables jQuery - 自定义排序箭头
【发布时间】：2021-08-08 04:03:55
【问题描述】：

我正在尝试更改 jQuery 版本的 DataTables (https://datatables.net/) 上的排序箭头。我想在不引入样式表和其他文件的情况下完成此操作。默认使用紫色箭头，这不适用于我的配色方案。我读到它们是png，所以我不能只改变颜色。是否可以添加一些 HTML/CSS 来将箭头更改为我自己的图标？

【问题讨论】：

Is there some HTML/CSS that I can add to change the arrows to my own icons? 是的。到目前为止，您尝试过什么？
@Dominik 我尝试更改“table.dataTable thead .sorting”、“table.dataTable thead .sorting_asc”、“table.dataTable thead .sorting_desc”的背景图像

标签： html jquery css twitter-bootstrap datatables

【解决方案1】：

我想通了。对于将来需要此功能的任何人，为了更改排序箭头，您必须创建一个内部样式。由于 DataTables 使用 !important，因此您无法在外部样式表中更改它（据我所知）。

将此添加到 html 文件的头部或正文中：

<style>
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
background-image: url(.....) !important;
}
</style>

【讨论】：