Js + Bootstrap table + adminlte-Custom formatter, add Arrowhead style to table, adjust column width

var drawdatatable=function (Chartid) {
var dataList = [
{
"Criteria": "q>100",
"Count": "+ Up",
"Cratio": "10% Up",
"Pratio": "60% Up"

},
{
"Criteria": "50&lt;q≤100",//< needs to be escaped, otherwise it is considered an HTML tag
"Count": "+ Up",
"Cratio": "10% Up",
"Pratio": "60% Up"

},{
"Criteria": "10&lt;q&lt;=50",
"Count": "Down",
"Cratio": "10% Down",
"Pratio": "60% Down"

},{
"Criteria": "0&lt;q&lt;=10",
"Count": "Down",
"Cratio": "10% Down",
"Pratio": "60% Down"

},{
"Criteria": "Q=0",
"Count": "The EQ",
"Cratio": "10% eq",
"Pratio": "60% eq"
}
]
$ ("#" + Chartid). Bootstraptable (' Destroy '). Bootstraptable ({
Data:datalist,
columns:[
{
Field: ' Criteria ',
Title: ' Distribution of items ',
Width: "30%"//Set width
               
},
{
Field: ' Count ',
Title: ' Number of clients ',
Width: "30%",
Formatter:operateformatter//Custom style, pass three parameters (Value,row, index), cell value, row value, index
},
{
Field: ' Cratio ',
Title: ' Account Ratio ',
Width: "25%",
Formatter:operateformatter
},
{
Field: ' Pratio ',
Title: ' Goods accounted for ',
Width: "25%",
Formatter:operateformatter,//custom method, add action button
}
]
});
}

function Operateformatter (value, row, index) {
var arr=value.split ("")
return arr[0] + arrowstyle (arr[1]); Get the custom arrowhead style
}
function Arrowstyle (category) {
var temp= '
Switch (category) {
Case ' up ':
temp= ' <span class= "Text-green" style= "margin-left:10px" ><i class= "fa fa-long-arrow-up" ></i></ Span> '
Break
Case ' down ':
temp= ' <span class= "text-red" style= "margin-left:10px" ><i class= "fa Fa-long-arrow-down" ></i></ Span> '
Break
Case "EQ":
temp= ' <span class= "Text-yellow" style= "margin-left:10px;" >━</span> '
Break
Default
Break
}
return temp;
}

Js + Bootstrap table + adminlte-Custom formatter, add Arrowhead style to table, adjust column width