html表格添加排序图标,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;

}