Laravel

Question

我正在努力对 Laravel/Yajra Datatables 中的关系列进行排序和搜索。

我有一个 Metro 模型与 Station 有关系。这是我的代码。

地铁table列

id, name, number, origin_id, destination_id, created_at, updated_at

个站 table 个列

id, name, code, info, photo, created_at, updated_at

地铁模型

/**
 * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
 */
public function origin()
{
    return $this->belongsTo(Station::class, 'origin_id');
}

/**
 * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
 */
public function destination()
{
    return $this->belongsTo(Station::class, 'destination_id');
}

地铁控制器JSON

/**
 * DataTable json data request
 *
 * @param \App\Metro $metro
 *
 * @return mixed
 * @throws \Exception
 */
public function jsonData(Metro $metro)
{
    return DataTables::of($metro::select('id', 'name', 'number', 'origin_id', 'destination_id', 'created_at', 'updated_at'))
                     ->addColumn('action', function ($metro) {

                         $show    = route('admin.metros.show', $metro);
                         $edit    = route('admin.metros.edit', $metro);
                         $destroy = route('admin.metros.destroy', $metro);
                         $attr    = 'onclick=metroDelete(' . $metro->id . ')';

                         return view('admin.components.action', compact([
                             'show',
                             'edit',
                             'destroy',
                             'attr',
                         ]));

                     })
                     ->editColumn('origin_id', function ($metro) {
                         return '<a href="'.route('admin.stations.show', $metro->origin->id).'">' . $metro->origin->name . '</a>';
                     })
                     ->editColumn('destination_id', function ($metro) {
                         return '<a href="'.route('admin.stations.show', $metro->destination->id).'">' . $metro->destination->name . '</a>';
                     })
                     ->editColumn('created_at', function ($metro) {
                         return $metro->created_at->diffForHumans();
                     })
                     ->escapeColumns([])
                     ->make(TRUE);
}

查看 - Javascript

$(document).ready(function () {

    let metroDataTable = $('#metroDataTable');

    metroDataTable.DataTable({
        serverSide  : true,
        processing  : true,
        autoWidth   : false,
        ajax        : '{!! route('admin.metros.json') !!}',
        lengthMenu  : [[25, 50, 75, 100, -1], [25, 50, 75, 100, "All"]],
        columns     : [
            {data: 'id', name: '{{__('admin.metro.id')}}', width: '50px'},
            {data: 'name', name: '{{__('admin.metro.name')}}', width: '100px'},
            {data: 'number', name: '{{__('admin.metro.number')}}', width: '100px'},
            {data: 'origin_id', name: '{{__('admin.metro.origin')}}', width: '200px'},
            {data: 'destination_id', name: '{{__('admin.metro.destination')}}', width: '200px'},
            {data: 'created_at', name: 'created_at'},
            {
                data      : 'action',
                name      : '{{__('admin.action')}}',
                orderable : false,
                searchable: false,
                className : 'text-center'
            },
        ],
        initComplete: function () {
            this.api().columns().every(function () {
                var column = this;
                var input  = document.createElement("input");
                $(input).appendTo($(column.footer()).empty())
                    .on('change', function () {
                        column.search($(this).val(), false, false, true).draw();
                    });
            });
        }

    }); // end of DataTables

}); // end of jQuery Document

当我尝试对 Origin 或 Destination 列进行排序或搜索该列时，出现以下错误。

Question:

How can I make 'originanddestination` columns sortable and searchable?

Answer 1

不需要翻译columns选项中的name，这个值只被dataTablesAPI使用，所以你不应该翻译它：

改变

{data: 'origin_id', name: '{{__('admin.metro.origin')}}', width: '200px'},

到

// If data and name are the same you can remove the name altogether
{data: 'origin_id', width: '200px'},

为了允许对原始名称进行过滤/排序，您必须执行以下操作。

急切加载控制器中的关系：

// Not sure why are passing a model instance here
return DataTables::of($metro::with('origin', 'destination')

// This should be the same but in my opinion cleaner
return DataTables::of(Metro::with('origin', 'destination')

更改列选项中的名称属性：

{data: 'origin_id', name: 'origin.name', width: '200px'},

您可以阅读有关数据表关系的更多信息 here。

Laravel - Yajra 数据表排序和搜索关系列

Laravel - Yajra Datatable sorting and searching for relationship column

yajra-datatable

地铁table列

个站 table 个列

地铁模型

地铁控制器JSON

查看 - Javascript