Datatable中基于ID的信息颜色状态高亮显示（Laravel 8）

Posted 2023-03-21

【中文标题】Datatable中基于ID的信息颜色状态高亮显示（Laravel 8）

【英文标题】：Highlight colour status of information based on ID in Datatable (Laravel 8)

【发布时间】：2021-12-28 23:52:02

【问题描述】：

我有一个用户的索引表，每次用户注册时都有一个基于传递的ID的验证信息状态。根据这张图片，每个状态在数据库名称 status_records 下都有 3 个值，即“草稿”、“需要验证”、“已验证”。我想根据 ID 制作着色文本。例如，如果用户在“草稿”下，则索引数据表中的文本状态会将文本“草稿”着色为蓝色，而如果用户在“已验证”下，则文本颜色将为绿色。

我正在使用 Datatable 来显示索引。对于状态列下的值，它只传递了 ID 并仅显示标准黑色。参考下图，

我还是 Datatable 的新手，我不知道将逻辑放在控制器还是 JS 索引刀片中。

但这里是我的模式 user.php 与 statusrecord 的关系：

public function statusrecord()
return $this->hasOne(StatusRecord::class, 'id', 'status_record');

用户控制器

 public function index()
 $record = User::with('ownership','assetdpa','statusrecord')->where('asset_type_id','=',1)->orderby('id', 'asc')->get();
 if(request()->ajax())
 return DataTables()::of($record)
 ->addIndexColumn()
 ->addColumn('status', function($record)
 if($record->statusrecord)
     return '<span class="badge badge-primary" >Active</span>';
  else
     return '<span class="badge badge-danger">Deactive</span>';
 
  )
 ->rawColumns(['action', 'fullOrganisation','fullLocation','fullCategory'])
 ->make(true);
 
 return view('asset.index',compact('record'));

index.blade.php

  $(document).ready(function()
  $('#item_table').DataTable(
 columnDefs: [data:('statusrecord'),
 render: function ( statusrecord, type, row ) 
 var color = 'black';
 if (id = 1) 
 color = 'green';
  
 if (id = 2) 
  color = 'blue';
 
 if (id = 3) 
color = 'red';

 return '<span style="color:' + color + '">' + data + '</span>';

]
)
)

【参考方案1】：

而不是在索引上呈现表格。对数据进行 Ajax 调用并让它生成表格。

在 web.php 中创建一个路由 -

    Route::get ('trailer/list', [TrailersController::class, 'getTrailers'])->name ('trailers.list');

在您的控制器示例中（这样您可以映射要在表格中显示的数据）-

// Tractor list for DataTables
public function getTrailers(Request $request)

    $trailers= Trailers::latest()->get();

    return Datatables::of($trailers)
        ->addColumn('Actions', function ($trailers)  
            return '<button class="btn btn-light btn-active-light-info btn-sm" data-bs-toggle="modal" data-bs-target="#edit-trailers-'.$trailers->id.'" class="menu-link px-3">Edit</button>';
        )
        ->rawColumns(['Actions'])
        ->make(true);

例如 - 这是我必须展示的预告片。在状态列中，我所做的只是一个呼叫，说明状态 = 'Active' 是否显示绿色徽章。如果“非活动”显示红色徽章。

$(function () 
    $("#trailer_table").DataTable(
        processing: !0,
        serverSide: !0,
        searching: !1,
        order: [[0, "desc"]],
        search:  return: !0 ,
        pageLength: 7,
        ajax: '!! route('trailers.list') !!',
        columns: [
             data: "status",
                render: function(data, type, row, meta)
                    if(type === 'display')
                        if(data === 'Active')
                            data = '<span class="badge badge-light-success">Active</span>';
                        
                        else if(data === 'Inactive')
                            data = '<span class="badge badge-light-danger">Inactive</span>';
                        
                        return data;
                    ,
             data: "trailer_id", name: "trailer_id" ,
             data: "year", name: "year" ,
             data: "make", name: "make" ,
             data: "model", name: "model" ,
             data: "owned_by", name: "owned_by" ,
             data: "last_inspection", name: "last_inspection" ,
             data: "Actions", name: "Actions", orderable: !1, serachable: !1, sClass: "text-center" ,
        ],
    );
);

希望这会有所帮助。