Как использовать rowspan и colspan с датированными данными, если данные таблицы динамические и могут иметь размеры до двух измерений?

Question

Я использую datatable в проекте laravel.Необходимо получить записи из базы данных, и это может быть до двух измерений.Как я могу использовать rowspan или colspan для создания группы категорий записей с функциями пагинации и pageLength?

Этот проект работает над фреймворком Laravel 5.5.php> = версия 7.0 и MySQL 5.0.

Я также попробовал rowGroup datatable.Но у него есть некоторые ограничения, такие как:

• В настоящее время для группировки можно использовать только одну точку данных - поддержка вложенной группировки не поддерживается

• Нет возможности развернуть / свернуть группу

• Нет поддержки параметров экспорта расширения Buttons - информация о группировке просто игнорируется.

var table = $('#report-employee-table').DataTable({
    pageLength: 20,
    processing: true,
    serverSide: true,
    bLengthChange: false,
    dom: 'Blfrtip',
    buttons: [{
            extend: 'excelHtml5',
            "text": '<span class="glyphicons glyphicons-file_export"></span> &nbsp; Export',
            "title": 'Employee Report',
            "message": 'Employee Name: ' + $('#employee_id option:selected').text() + '      Work Duration: ' + $('#report_date').val(),
            "filename": 'employee-report',
            header: true,
            footer: true,
            exportOptions: {
                modifier: {
                    selected: true
                }
            },
            customize: function (xlsx) {
                var sheet = xlsx.xl.worksheets['sheet1.xml'];
                // s = for styling and 5 will make it left align with grey background
                $('row:first c', sheet).attr('s', '5');
            }
        },
        {
            extend: 'print',
            "text": '<span class="fa fa-print"></span> &nbsp; Print',
            "title": 'Employee Report',
            "message": 'Employee Name: ' + $('#employee_name option:selected').text() + '      Work Duration: ' + $('#report_date').val(),
            "filename": 'employee-report',
            header: true,
            footer: true,
            exportOptions: {
                modifier: {
                    selected: true
                }
            }
        }
    ],
    ajax: {
        url: "/*URL of controller where function return data in json format*/",
        data: function (d) {
            d.employee_name = $('#employee_name').val();
            d.report_date = $('#report_date').val();
        }
    },
    columns: [
        //{data: 'DT_Row_Index', name: 'DT_Row_Index'},
        {
            data: 'project_name',
            name: 'project_name'
        },
        {
            data: 'work_type_name',
            name: 'work_type_name'
        },
        {
            data: 'total_hour',
            name: 'total_hour'
        },
    ],
    rowsGroup: ['project_name:name', 0],
    footerCallback: function (row, data, start, end, display) {
        var api = this.api();

        var aCol = api.column(2);

        var foo = aCol.data(); //is empty!

        $(aCol.footer()).html(

        );
    },
});