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