在 Laravel 中显示 DataTable 的列

Question

我正在使用 DataTable 来显示数据。我有类似下面的服务。

服务

class HowtorentService
{
    use ResponseTrait;
    
    public function getAll()
    {
        $data = Howtorent::get();
        return $data;
    }

    public function getAllData()
    {
        $howtorents = $this->getAll();

        return datatables($howtorents)
            ->addColumn('url', function ($howtorent) {
                return  $howtorent->url;
            })
            ->addColumn('view', function ($howtorent) {
                return '<div>Hello</div>';
            })
            ->addColumn('action', function ($howtorent) {
                return '<div class="tbl-action-btns d-inline-flex">
                            <button type="button" class="p-1 tbl-action-btn viewdata" data-detailsurl="' . route('owner.safety.electric_safety.electric_details', $howtorent->id) . '" title="' . __('View') . '"><span class="iconify" data-icon="carbon:view-filled"></span></button>      
                            <button type="button" class="p-1 tbl-action-btn edit" data-detailsurl="' . route('owner.safety.boiler.boiler_details', $howtorent->id) . '" title="' . __('Edit') . '"><span class="iconify" data-icon="clarity:note-edit-solid"></span></button>  
                            <button onclick="deleteItem(\'' . route('owner.safety.boiler.destroy', $howtorent->id) . '\', \'gassaftiesDatatable\')" class="p-1 tbl-action-btn"   title="' . __('Delete') . '"><span class="iconify" data-icon="ep:delete-filled"></span></button>
                        </div>';
            })
            ->rawColumns(['view','action'])
            ->make(true);
    }
}

JavaScript

$('#howtorentDatatable').DataTable({
    processing: true,
    serverSide: true,
    pageLength: 25,
    responsive: true,
    ajax: $('#howToRentRoute').val(),
    order: [1, 'desc'],
    ordering: false,
    autoWidth: false,
    drawCallback: function () {
        $(".dataTables_length select").addClass("form-select form-select-sm");
    },
    language: {
        'paginate': {
            'previous': '<span class="iconify" data-icon="icons8:angle-left"></span>',
            'next': '<span class="iconify" data-icon="icons8:angle-right"></span>'
        }
    },
    columns: [
        {
            "data": "url",
        },
        {
            "data": "view",
        },
        {
            "data": "action",
        },
    ]
});

刀片

<table id="howtorentDatatable" class="table responsive theme-border p-20 ">
                                <thead>
                                    <tr>
                                        <th class="all">{{ __('URL') }}</th>
                                        <th class="all">{{ __('View') }}</th> 
                                        <th class="all">{{ __('Action') }}</th>
                                    </tr>
                                </thead>
                            </table>

但是我看不到

View

Coloumn 的任何数据。

Answer 1

您需要在 JavaScript 数据表配置中的“视图”列中添加名称。该名称应与您在

getAllData()

方法中添加列时使用的名称匹配。

columns: [
    {
        "data": "url",
    },
    {
        "data": "view",
        "name": "view" // Add this line
    },
    {
        "data": "action",
    },
]