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; }