Row Group Server Side Yajra DataTables

Question

i have problem with yajra datatables to make row group in server side. I want row group show all employee in companies.name. and my current code like this:

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

and in blade i just call datatable like this

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

and the script like this

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

If i following the tutorial on https://datatables.yajrabox.com/eloquent/master, its possible to make row group but i dont know how to implement in server side. But is so different with my code in blade. Tutorial call datatable like this.

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

and the result like this and i expected like this to but in datatables server side

Thank you if you can help to help me and explain how to solve the problem code

score 0 · Answer 1 · answered May 15 '21 at 17:53

Injecting this in your DataTable options may help you (I've tried and it's working in my case)

$(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'
})

Row Group Server Side Yajra DataTables

1 Answers1