Js + Bootstrap Table + adminlte - 自定義formatter，在表格內添加箭頭樣式，調整列寬

var drawDataTable=function(chartId){
    var dataList = [
                       {
                           "criteria": "q>100",
                           "count":   "400 up",
                           "cRatio": "10% up",
                           "pRatio":  "60% up"

                       },
                       {
                          "criteria": "50&lt;q≤100",　　　　　　//<需要轉義，否則被視為html標簽
                          "count":   "400 up",
                          "cRatio": "10% up",
                          "pRatio":  "60% up"

                      },{
                            "criteria": "10&lt;q&lt;=50",
                            "count":   "400 down",
                            "cRatio": "10% down",
                            "pRatio":  "60% down"

                        },{
                            "criteria": "0&lt;q&lt;=10",
                            "count":   "400 down",
                            "cRatio": "10% down",
                            "pRatio":  "60% down"

                        },{
                             "criteria": "q=0",
                             "count":   "400 eq",
                             "cRatio": "10% eq",
                             "pRatio":  "60% eq"
                         }
                   ]
    $("#" + chartId).bootstrapTable('destroy').bootstrapTable({
        data: dataList，
        columns:[
            {
                field:'criteria',
                title:'物品數量分布',
                width:"30%"　　　　　　//設置寬度
               
            },
            {
                field:'count',
                title:'客戶數',
                width:"30%",
                formatter: operateFormatter　　　　//自定義樣式，傳三個參數（value，row, index）,單元格值，行值，索引
            },
            {
                field:'cRatio',
                title:'客戶占比',
                width:"25%",
                formatter: operateFormatter
            },
            {
                field:'pRatio',
                title:'物品占比',
                width:"25%",
                formatter: operateFormatter, //自定義方法，添加操作按鈕
            }
        ]
    });
    }

function operateFormatter(value, row, index){
    var arr=value.split(" ")
    return arr[0] + arrowStyle(arr[1]);　　//獲取自定義箭頭樣式
}
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;
}