Highlight colour status of information based on ID in Datatable (Laravel 8)

user_11410504 0
Viewed 405

I have an index table with a user that have an information status of verification based on passed on ID every time user register. Every status has 3 value which is 'Draft','Need Verify','Verified' under DB name status_records based on this picture. I want to make colouring text based on ID. For example, If user under 'Draft', the text status in index datatable will colouring text 'Draft' with blue colour while if user under 'Verified' the colour for text will be green.

enter image description here

I'm using Datatable for showing the index. For value under status column, it only passed the ID and just showing the standard black colour. Refer the picture below,

enter image description here

I'm still new to Datatable and i do not know where to put the logic whether in controller or JS index blade.

But here is my mode user.php for relationship with statusrecord :

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

UserController

 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>';
}
}]
})
})
laravel-8 datatable ajax
1 Answers

Instead of rendering the table on the index. Make an Ajax call to the data and have it produce the table.

In web.php create a route -

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

In your controller example (This way you can map the data you want to show in the Table) -

// 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);
}

For example - Here is what I have to show a trailer. In the status column all I'm doing is a call stating if status = 'Active' show a green badge. If 'Inactive' show a red badge.

$(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" },
        ],
    });
});

Hope this helps a little.

user_147648450
Related