css - 将 DataTables Bootstrap 排序箭头还原为原始三 Angular 形

Question

有没有人想出一种方法来用原始的向上/向下三 Angular 形替换 Datatable 的 Bootstrap css 样式使用的字形排序箭头而不破坏 dataTable.bootstrap.css 文件？基本相同问题的公认答案 jquery DataTables: weird sort arrows ，是完全放弃 Bootstrap 样式。

到目前为止，我能够做到这一点的唯一方法是注释掉 dataTable.bootstrap.css 的相关部分，并将 dataTables.foundation.css 中的原始样式添加到我自己的样式表中。这显然不是一个很好的解决方案，也绝对不是最佳实践!

两年前在这里讨论过这个话题，Change sort arrows to triangles - Tables #5209 ，但是没有同意将它们改回来，所以我们留下了字形图标，我个人认为在 DataTable 标题的上下文中这在视觉上不是很吸引人。

有什么建议么？

Answer 1

你应该能够做这样的事情:

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after {
    display:none;
}

table.dataTable thead .sorting_desc::after {
    display:none;
}

table.dataTable thead .sorting {
   background-image: url(https://datatables.net/media/images/sort_both.png);
   background-repeat: no-repeat;
   background-position: center right;
}

table.dataTable thead .sorting_asc {
   background-image: url(https://datatables.net/media/images/sort_asc.png);
   background-repeat: no-repeat;
   background-position: center right;
}

table.dataTable thead .sorting_desc {
   background-image: url(https://datatables.net/media/images/sort_desc.png);
   background-repeat: no-repeat;
   background-position: center right;
}

见 this jsFiddle进行演示。

您还可以使用其他字形，如下所示:

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after {
    content: "\e252";
}

table.dataTable thead .sorting_desc::after {
    content: "\e253";
}

见 this jsFiddle进行演示。

另外，您也可以使用我的 original answer 完全摆脱 Bootstrap 风格。 .