bootstrap-table 自定義排序圖標

bootstrap-table 修改排序圖標

一、修改bootstrap-table.js
1、在表頭插入span元素，根據是否啓用表格排序添加class=‘both’（爲排序箭頭做準備）


2、將removeClass(‘desc asc’)改爲removeClass(‘both desc asc’)（爲後面寫樣式準備）

二、修改bootstrap-table.css
1、去掉以圖片作爲排序圖標樣式

2、添加自定義樣式

三、結果

自定義樣式代碼

.fixed-table-container thead th .both > .both{
margin-left: 15px;
display: inline-block;
position: relative;
}
.fixed-table-container thead th .both > .both:before{
content: ”;
display: inline-block;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #000;
vertical-align: middle;
position: absolute;
left: -4px;
top:-10px
}
.fixed-table-container thead th .both > .both:after{
content: ”;
display: inline-block;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
vertical-align: middle;
position: absolute;
left: -4px;
top:-4px
}
.fixed-table-container thead th .asc >.both{
margin-left: 12px;
display: inline-block;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #000;
vertical-align: middle;
position:static;
}

.fixed-table-container thead th .desc >.both{
margin-left: 12px;
display: inline-block;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
vertical-align: middle;
position:static;
}