如何在 DataTable 中 return <div>

Question

我在 laravel 中创建了包含数据 table 的项目。我想 return 一个 div 值作为我专栏中的进度条。但是，我的 table 中只显示文本，而不是进度条。这是我的控制器

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

这是我的看法

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

我想在每个进度栏中添加Bootstrap Progress，可以吗？或者我的代码有什么问题？提前致谢

Answer 1

在您的 rawColumns() 上添加 progress 列：

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

如何在 DataTable 中 return <div>

How to return <div> in DataTable

javascript

datatable

laravel

laravel-8