如何更改数据表行背景颜色

Question

在我的 Phalcon 项目中，我试图根据一些数据更改行的颜色。我将不胜感激任何帮助。这就是我正在处理的事情。在我的控制器中：

private function dataTablesAjax($request)
    {
        
        $params = $columns = $totalRecords = $data = [];
        $params = $_REQUEST;
        $columns = array(
         
            0 => 'payID',
            1 => 'userName',
            2 => 'refundDays',
 
        );
        
        $builder = $this->modelsManager->createBuilder()
            ->columns([
                'payID' => 'a.payID',
                'userName' => 'a.userName',
                'refundDays' => 'a.days',
            ])
            ->addFrom(AccountsRefunds::class, 'ar');
    
        $builder->orderBy($columns[$params['order'][0]['column']] . "   " . $params['order'][0]['dir']);
        $builder->limit($params['length'], $params['start']);

        $result = $builder->getQuery()->execute();

        foreach ($result as $value) {
        
            $nokey = array();
            $nokey[] = $value->payID;
            $nokey[] = $value->userName;
            $nokey[] = $value->refundDays;
            $data[] = $nokey;
        }
        return [
            "draw" => intval($params['draw']),
            "recordsTotal" => intval($totalRecords),
            "recordsFiltered" => intval($totalRecords),
            "data" => $data
        ];
    }

在这里，我只是从查询生成器获取数据并将行传递到相应的视图中：

<div class="card-body">
                <table class="table table-hover responsive" id="dataTables" width="100%" cellspacing="0">
                    <thead>
                    <tr>
                        <th>payID</th>
                        <th>userName</th>
                        <th>refundDays</th>
                    </tr>
                    </thead>
                </table>
</div>

数据表中的数据呈现为表体。我只是想以某种方式包装这部分:

foreach ($result as $value) {
        
            $nokey = array();
            $nokey[] = $value->payID;
            $nokey[] = $value->userName;
            $nokey[] = $value->refundDays;
            $data[] = $nokey;
}

在表行中，以便我可以根据某些数据动态渲染类。我不知道这是否可能。我将不胜感激任何帮助，谢谢！

Answer 1

        $('#dataTables').dataTable( {
            "createdRow": function( row, data, dataIndex){
                if( data[2] ==  `someVal`){
                    $(row).addClass('dark-background');
                } elseif(data[2] ==  `someOtherVal`) {
                    $(row).addClass('light-background');
                 }

            }
        });

将

data[2]

替换为要检查的特定变量，将

someVal

和

someOtherVal

替换为要检查的值 您可以使用更多逻辑、不同的 CSS 类来扩展它，甚至可以通过 API 中的数据传递类名/颜色等内容。