在datatable中显示百分比进度条

在DataTable的每个单元格中，显示百分比进度条，根据具体的百分比，进步条显示不同的颜色（绿色：正常；黄色：警告；红色：危险），用于分析效率之类的问题，废话不多说，看效果。

如果你有这种需求，就继续往下看。。。。。没有的话。。。。。。也可以看，哈哈。。。。

首先有这是在laveral框架下实现的，其他框架也大同小异，其实这个功能和用哪个框架没什么鸟关系。。

1.View层：

<div class="table-responsive">
    <table class="table table-striped  table-hover " id="main_table"  cellspacing="0" width="100%">
           <thead>
               <tr>
                  <th id="status">状态</th>
                  <th id="workstation_name">设备</th>
                  <th id="availability">可用率</th>
                  <th id="performance">表现性</th>
                  <th id="quality">质量指数</th>
                  <th id="oee">OEE</th>
                </tr>
            </thead>
            <tfoot>

            </tfoot>
            <tbody>
            /tbody>
     </table>
</div>

2.js层

function InitMainTable(){
    table = $('#main_table').DataTable({
        language: {
            url: '/js/plugins/dataTables/Chinese.json'
        },
        autoWidth: true,
        searching: false,
        ordering: false,
        scrollX: true,
        bDestroy:true,
        processing: true,
        serverSide: true,
        dataType: 'json',
        ajax: {
            "url": "/OEE/Get_device_info",
            "type": "get"
        },
        columns: [
            {data:'status',"searchable":false,"orderable":false,

                render: function(data, type, row, meta) {
                    var status="<div class='fa fa-circle text-info'></div>";

                    return "<div class='fa fa-circle text-info'></div>";
                }
            },
            { "data": "workstation_name","searchable":false,"orderable":false },
            { "data": "availability","searchable":false,"orderable":false,
                render:function(data){
                    var tmp = ((100*data).toFixed(2)).toString();
                    var num =tmp+"%";
                    var result="style='width: "+tmp+"%'";
                    var color="class='progress-bar'";
                    if(data>=0.9){
                        color="class='progress-bar'";
                    }
                    else if(data>=0.7){
                        color="class='progress-bar progress-bar-warning'";
                    }
                    else {
                        color="class='progress-bar progress-bar-danger'";
                    }
                    return "<div class='col-lg-12'>"+
                                "<div> <small class='pull-right'>"+num+"</small> </div>"+
                                "<div class='progress progress-small'>"+
                                     "<div id='DXI092-0208_progress-bar'"+result+color+"></div>"+
                                    // "<input value='29%'  readonly='true' style=' text-align-all: left;margin-top: -3px;border:1px;font-size: 5px;width: 25px'>"+
                                "</div>"+

                            "</div>";
                }
            },
            { "data": "performance","searchable":false,"orderable":false,
                render:function(data){
                    var tmp = ((100*data).toFixed(2)).toString();
                    var num =tmp+"%";
                    var result="style='width: "+tmp+"%'";
                    var color="class='progress-bar'";
                    if(data>=0.9){
                        color="class='progress-bar'";
                    }
                    else if(data>=0.7){
                        color="class='progress-bar progress-bar-warning'";
                    }
                    else {
                        color="class='progress-bar progress-bar-danger'";
                    }
                    return "<div class='col-lg-12'>"+
                        "<div> <small class='pull-right'>"+num+"</small> </div>"+
                        "<div class='progress progress-small'>"+
                        "<div id='DXI092-0208_progress-bar'"+result+color+"></div>"+
                        // "<input value='29%'  readonly='true' style=' text-align-all: left;margin-top: -3px;border:1px;font-size: 5px;width: 25px'>"+
                        "</div>"+

                        "</div>";
                }
                // render:function(data, type, row,meta){
                //     if (data=='info'){
                //         return "<div class='fa fa-circle text-info'></div>";
                //     }else if(data=='primary'){
                //         return "<div class='fa fa-circle text-primary'></div>";
                //     }
                //     else if(data=='warning'){
                //         return "<div class='fa fa-circle text-warning'></div>";
                //     }
                //     else{
                //         return "<div class='fa fa-circle text-danger'></div>";
                //     }
                // }
                },
            { "data": "quality","searchable":false,"orderable":false,
                render:function(data){
                    var tmp = ((100*data).toFixed(2)).toString();
                    var num =tmp+"%";
                    var result="style='width: "+tmp+"%'";
                    var color="class='progress-bar'";
                    if(data>=0.9){
                        color="class='progress-bar'";
                    }
                    else if(data>=0.7){
                        color="class='progress-bar progress-bar-warning'";
                    }
                    else {
                        color="class='progress-bar progress-bar-danger'";
                    }
                    return "<div class='col-lg-12'>"+
                        "<div> <small class='pull-right'>"+num+"</small> </div>"+
                        "<div class='progress progress-small'>"+
                        "<div id='DXI092-0208_progress-bar'"+result+color+"></div>"+
                        // "<input value='29%'  readonly='true' style=' text-align-all: left;margin-top: -3px;border:1px;font-size: 5px;width: 25px'>"+
                        "</div>"+

                        "</div>";
                }
                // render:function(data){
                //     console.log(data);
                //     var div = document.createElement('div');
                //     $( "#div" ).progressbar({
                //         value: data*100
                //     });
                //     return "<div id='div'></div>";
                // }
            },
            { "data": "oee","searchable":false,"orderable":false,
                render:function(data){
                    var tmp = ((100*data).toFixed(2)).toString();
                    var num =tmp+"%";
                    var result="style='width: "+tmp+"%'";
                    var color="class='progress-bar'";
                    if(data>=0.9){
                        color="class='progress-bar'";
                    }
                    else if(data>=0.7){
                        color="class='progress-bar progress-bar-warning'";
                    }
                    else {
                        color="class='progress-bar progress-bar-danger'";
                    }
                    return "<div class='col-lg-12'>"+
                        "<div> <small class='pull-right'>"+num+"</small> </div>"+
                        "<div class='progress progress-small'>"+
                        "<div id='DXI092-0208_progress-bar'"+result+color+"></div>"+
                        // "<input value='29%'  readonly='true' style=' text-align-all: left;margin-top: -3px;border:1px;font-size: 5px;width: 25px'>"+
                        "</div>"+

                        "</div>";
                }
            },

        ],

    })
}

3.Controller层

function Get_device_info(Request $request){

        $draw=$request->input('title');
        $start=$request->input('start');
        $length=$request->input('length');
        $order=$request->input('order');

        $RecordsFiltered=$RecordsTotal=DB::connection('mysql')
            ->table('device_oee_record')
            ->where('deleted',0)
            ->count();

        //判断start与length有没有效
        if(!(isset($start) && $length != -1))
        {
            $start = 0;
            $length = 10;
        }
        $basic_techparam= DB::connection('mysql')
            ->table('device_oee_record')
            ->where('deleted',0)
            //->orderBy('id','desc')//逆序查找
            ->skip($start)
            ->take($length)
            ->get();
        //dataTable 返回 Json 数组
        $resultTable = array();
        foreach ($basic_techparam as $key=>$value)
        {
            $singleResultTable = array();

            //读取确定数据
            //$singleResultTable['id'] = $basic_techparam[$key]->id;
            $singleResultTable['workstation_name'] = $basic_techparam[$key]->workstation_name;
            $singleResultTable['availability'] = $basic_techparam[$key]->availability;
            $singleResultTable['performance'] = $basic_techparam[$key]->performance;
            $singleResultTable['quality'] = $basic_techparam[$key]->quality;
            $singleResultTable['oee'] = $basic_techparam[$key]->oee;

            array_push($resultTable,$singleResultTable);
        }

        return   $this->encodeTableData($draw,$RecordsTotal,$RecordsFiltered,$resultTable);//针对data_table必须使用这种返回方式
    }

4.路由层

Route::get('/OEE/Get_device_info','OEE\OEEoutlineController@Get_device_info');