如何修改DataTables排序功能的CSS样式，替换为自定义排序图标

第一步：彻底清除Datatables默认排序样式干扰 #

除了你已经设置的background:none，还要追加以下CSS覆盖内置样式，避免默认图标和布局影响自定义效果：

table.dataTable thead th,
table.dataTable thead td {
  background-image: none !important;
  padding: 8px 12px; /* 可根据实际需求调整内边距 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 禁用Datatables默认生成的伪类排序图标 */
table.dataTable thead th::before,
table.dataTable thead th::after {
  display: none !important;
}

第二步：给自定义图标设置对应样式 #

按以下配置编写两个箭头的样式，注意替换示例中的图标路径为你本地/线上的图标资源地址：

.icon_arrow_left, .icon_arrow_right {
  display: inline-block;
  width: 16px; /* 按你图标实际尺寸调整宽高 */
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.icon_arrow_left {
  background-image: url("替换为你的左箭头/升序图标路径");
  order: -1; /* 自动把左箭头放到表头文字左侧 */
}
.icon_arrow_right {
  background-image: url("替换为你的右箭头/降序图标路径");
  order: 2; /* 自动把右箭头放到表头文字右侧 */
}
/* 可选：表头文字样式控制 */
.th-text {
  order: 1;
}

第三步：调整表头HTML结构 #

建议把表头文字单独包裹一层标签，方便布局控制，修改后结构如下：

<table>
  <thead>
    <tr>
      <th>
        <span class="th-text">id</span>
        <span class="icon_arrow_left"></span>
        <span class="icon_arrow_right"></span>
      </th>
      <!-- 其他表头列按相同结构编写即可 -->
    </tr>
  </thead>
  <!-- 表格主体内容 -->
</table>

如果需要实现排序激活时切换图标高亮状态，可配合Datatables的排序监听事件，给当前激活的排序列增加自定义active类，控制对应箭头的透明度、颜色即可。

内容的提问来源于stack exchange，提问作者Regual