恢復DataTables引導排序箭頭到原來的三角形

Question

有沒有人想通過原始上/下三角形替換datatable的引導CSS樣式所使用的圖形排序箭頭，而不會損壞dataTable.bootstrap.css文件？對基本相同的問題jquery DataTables: weird sort arrows的接受答案是放棄引導樣式。

到目前爲止我能做到這一點的唯一方法是註釋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擺脫引導風格。