将DataTables引导排序箭头还原为原始三角形

Question

有没有人想出一种方法来替换Datatable的bootstrap css样式使用的glyphicon排序箭头与原始的上/下三角形而不会破坏dataTable.bootstrap.css文件？对于基本相同的问题,jquery DataTables:奇怪的排序箭头,接受的答案是完全丢弃引导样式.

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

两年前在这里讨论了这个主题,将箭头改为三角形 - 表#5209,但没有同意将它们改回来,所以我们留下了glyphicon,我个人认为这些不是视觉上的在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;
}

请参阅此jsFiddle进行演示.

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

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

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

请参阅此jsFiddle进行演示.

另外,您可以使用我的原始答案完全摆脱Bootstrap风格.