在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>";
                }
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值