在datatable中显示百分比进度条

最新推荐文章于 2025-06-14 09:14:51 发布

原创

最新推荐文章于 2025-06-14 09:14:51 发布 · 4k 阅读

8 ·

CC 4.0 BY-SA版权

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