将DataTables Bootstrap排序箭头恢复为原始三角形

Question

有人找到了一种方法来用原始的上下三角形替换使用Bootstrap CSS样式的Datatable中的glyphicon排序箭头吗？与基本相同的问题 jquery DataTables: weird sort arrows 的被接受的答案是完全放弃Bootstrap样式。目前我唯一能够做到的是注释掉dataTable.bootstrap.css中相关部分，并将dataTables.foundation.css中的原始样式添加到我的样式表中。这显然不是一个很好的解决方案，也绝对不是最佳实践！两年前这个话题在这里讨论过，Change sort arrows to triangles - Tables #5209，但并未达成改变它们回去的共识，因此我们只能使用glyphicon，个人认为在DataTable标头的上下文中它们不是非常视觉上令人愉悦。有什么建议吗？

- LWK69

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 样式。

- Gyrocode.com

---

Gyrocode，抱歉回复晚了。我其实非常喜欢你的第二个建议，因为它覆盖了较少的原始CSS。额外的好处是，glyphicon向上和向下的三角形比原始的DataTable更易于查看！感谢你的帮助。 - LWK69

我不得不稍微修改上面的答案，以摆脱旧图标。 table.dataTable thead .sorting::before, table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::before, table.dataTable thead .sorting_desc::after { display:none; } - tryptofame

这是非常有帮助的答案。 - STA

轻松工作的神奇解决方案 - mercury