行组服务器端 Yajra 数据表答案

【问题标题】：Row Group Server Side Yajra DataTables行组服务器端 Yajra 数据表
【发布时间】：2019-08-19 09:52:56
【问题描述】：

我在使用 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' }
            ]
        })
    }

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

如果你能帮助我并解释如何解决问题代码，谢谢

【问题讨论】：

标签： laravel datatables laravel-datatables

【解决方案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'
})

【讨论】：