How to return in DataTable

I created project in laravel with data table on it. I want to return a div value as progress bar in my column. But, only text shown in my table, not the progress bar. Here is my controller

  public function index(Request $request)
    {
      
        if ($request->ajax()) {
            $data = Post::where('user_id', Auth::id())->latest()->get();
            return Datatables::of($data)
                ->addIndexColumn()
                ->addColumn('progress', function ($row) {
                    $pro = $row->progress;
                    if ($pro == 0) {
                        $bar = '<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">0%</div></div>';
                        return $bar;
                    } else if (){}
...
                })
                ->rawColumns(['action'])
                ->make(true);
        }

        return view('Home');
    }

here is my view

 $(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('home.index') }}",

            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false,
                },
                {
                    data: 'title',
                    name: 'title',
                    orderable: false,
                },
                {
                    data: 'content',
                    name: 'content',
                    orderable: false,
                    visible: false,
                },
                {
                    data: 'progress',
                    name: 'progress'
                },
                {
                    data: 'status',
                    name: 'status'
                },
      
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ]
        });

I want to add Bootstrap Progress in each progress column, is that possible? or something wrong in my code? thanks in advance

Answer

Add progress column on your rawColumns() :

rawColumns(['action', 'progress'])

Advertisement

Answer