Question

我对yajra数据表有问题，无法在服务器端创建行组。我希望行组显示company.name中的所有员工。和我当前的代码是这样的：

public function index(DataTablesBuilderService $builder)
    {
        $columns = [
            'name' => [
                'title' => "company",
                'name'  => 'companies.name'
        ];


        $dataTables = $builder
            ->setUrl(route('api.employee_details.data_tables', request()->all()))
            ->withIndex()
            ->setColumns($columns);


        return view('employee_details.index')->with([
            'dataTables' => $dataTables,
        ]);
    }

在刀片中，我只是这样调用数据表

 {!! $dataTables->table(['class' => 'table table-bordered','style' => 'width:100%', 'cellspacing' => '0']) !!}

和类似的脚本

{!! $dataTables->scripts() !!}

如果我遵循https://datatables.yajrabox.com/eloquent/master上的教程，则可以建立行组，但是我不知道如何在服务器端实现。但是刀片中的代码与我的代码是如此不同。像这样的教程调用数据表。

var template = Handlebars.compile($("#details-template").html());
    var table = $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: 'https://datatables.yajrabox.com/eloquent/master-data',
        columns: [
            {
                "className":      'details-control',
                "orderable":      false,
                "searchable":      false,
                "data":           null,
                "defaultContent": ''
            },
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'created_at', name: 'created_at'},
            {data: 'updated_at', name: 'updated_at'}
        ],
        order: [[1, 'asc']]
    });

    // Add event listener for opening and closing details
    $('#users-table tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);
        var tableId = 'posts-' + row.data().id;

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
            row.child(template(row.data())).show();
            initTable(tableId, row.data());
            tr.addClass('shown');
            tr.next().find('td').addClass('no-padding bg-gray');
        }
    });

    function initTable(tableId, data) {
        $('#' + tableId).DataTable({
            processing: true,
            serverSide: true,
            ajax: data.details_url,
            columns: [
                { data: 'id', name: 'id' },
                { data: 'title', name: 'title' }
            ]
        })
    }

和这样的结果，我希望这样，但是在数据表服务器端

谢谢您能帮助我并解释如何解决问题代码

Answer 1

在您的 DataTable 选项中注入它可能对您有所帮助（我已经尝试过并且在我的情况下有效）

$(selector).DataTable({
   startRender: function (rows, group) {
      var grpName = rows.data().pluck('company')
         .reduce(function (a, b) {
            return (b === null ? '' : b);
         }, '');

      return $('<tr/>')
        .append('<td colspan="' + columns.length + '" class="text-left"><span class="ml-10px">' + grpName + '</span></td>');
   },
   endRender: null,
   dataSrc: 'company'
})

行组服务器端Yajra数据表

1 个答案: