初始化后如何按列对数据表进行分组

Question

所以目前我有一个数据表，它显示了很多文件的大量时间表，我需要创建一个函数，将所有数据按其受尊重的文件分组，但我发现的所有示例都在数据表的初始化中执行此操作，但我需要使用自定义创建的按钮来执行此操作，并且无法找到有关如何以这种方式执行此操作的任何示例或文档

该代码将只创建一个表，但我想要一个值为“组项目”的按钮，然后单击该按钮后，它应该按文件分组

$('#data-table-timesheet').DataTable({
            ajax: {
                url: '@Url.Action("GetTimeSheets", "Home")',
                data: function (d) {
                    d.from = $("#DateStart").data('datepicker').getFormattedDate('yyyy-MM-dd'),
                    d.to = $("#DateEnd").data('datepicker').getFormattedDate('yyyy-MM-dd'),
                    d.partyId = parseInt($("#UserId").val())
                },
                dataSrc: 'Data'
                },
                "footerCallback": function (row, data, start, end, display) {
                    var api = this.api(), data;

                    // Remove the formatting to get integer data for summation
                    var intVal = function (i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                                i : 0;
                    };

                    // Total over all pages
                    total = api
                        .column(8, { page: 'current' })
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Total over this page

                    pageTotal = api
                        .column(7, { page: 'current' })
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Update footer
                    $(api.column(7).footer()).html(
                        'R' + parseInt(pageTotal).toFixed(2)
                    );

                    pageTotal = api
                        .column(8, { page: 'current' })
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Update footer
                    $(api.column(8).footer()).html(
                        'R' + parseInt(pageTotal).toFixed(2)
                    );

                    var uTotal = api
                        .cells(function (index, data, node) {
                            if (api.row(index).data().LastModified == null && api.row(index).data().timelogId != null) {
                                return true;
                            }
                            else {
                                return false;
                            }
                        }, 6, { page: 'current' })
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    var cTotal = api
                        .cells(function (index, data, node) {
                            if (api.row(index).data().LastModified != null && api.row(index).data().timelogId != null || api.row(index).data().timelogId == null && parseInt(api.row(index).data().rateTotal) > 0) {
                                return true;
                            }
                            else {
                                return false;
                            }
                        }, 6, { page: 'current' })
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    $(api.column(6).footer()).html(
                        "C(" + parseInt(cTotal).toFixed(0).toString().secondsToHHMMSS() + ")" + "<br/> U(" + parseInt(uTotal).toFixed(0).toString().secondsToHHMMSS() + ")"
                    );
                },
                "columns": [
                    {
                        "data": "isJoined",
                        "render": function (data, type, row) {
                            if (row.isJoined == 1) {
                                return '<i class="fa fa-fw f-s-10 m-r-5 fa-circle text-primary"></i>';
                            }
                            else {
                                return "";
                            }
                        }
                    },
                {
                    "data": "StartDate",
                    "render": function (data, type, row) {
                        return moment(data).format("YYYY-MM-DD HH:mm").toString().trim();
                    }
                },
                {
                    "data": "EndDate",
                    "render": function (data, type, row) {
                        return moment(data).format("YYYY-MM-DD HH:mm");
                    }
                },
                { "data": "fileRef" },
                { "data": "CategoryName" },
                { "data": "Notes" },
                {
                    "data": "BillableMinutes",
                    "render": function (data, type, row) {
                        if (row.rateTotal > 0 ) {
                            return data.toString().secondsToHHMMSS();
                        }
                        else {
                            var x = (data / 60);
                            return x.toFixed(2);
                        }

                    }
                },
                { "data": "rateTotal" },
                { "data": "disbursementTotal" }
                ],
                "createdRow": function (row, data, dataIndex) {

                    if (data.LastModified == null && data.timelogId != null) {
                        $(row).addClass('redClass');
                    }
                },
                "deferRender": true,
                autoWidth: false,
                bAutoWidth: false,
                dom: 'Bfrtip',
                paging: false,
                select: true,
                responsive: true,
            select: {
                style: 'multi'
            },
            buttons: [
                { extend: 'copyHtml5', footer: true },
                { extend: 'excelHtml5', footer: true },
                { extend: 'csvHtml5', footer: true },
                { extend: 'pdfHtml5', footer: true }
                ],
                columnDefs: [
                    {
                        targets: 5,
                        render: $.fn.dataTable.render.ellipsis(50, true, true)
                    },
                    { "width": "5px", "targets": 0 },
                    { "width": "135px", "targets": 1 },
                    { "width": "135px", "targets": 2 },
                    { "width": "1px", "targets": 3 },
                    { "width": "1px", "targets": 4 },
                    { "width": "400px", "targets": 5 },
                    { "width": "2px", "targets": 6 },
                    { "width": "1px", "targets": 7 },
                    { "width": "1px", "targets": 8 }
                ]
            });

下面列出的代码是我如何在数据表初始化时进行行分组，但我需要将它放在一个单独的按钮中，这样当用户单击该按钮时，它只会进行分组

"drawCallback": function (settings) {
    var api = this.api();
    var rows = api.rows({ page: 'current' }).nodes();
    var last = null;

    api.column(3, { page: 'current' }).data().each(function (group, i) {
        if (last !== group) {
            $(rows).eq(i).before(
                '<tr class="group"><td colspan="5">' + group + '</td></tr>'
            );

            last = group;
        }
    });
}, 

Answer 1

因此，在网上搜索了几天后，我还没有找到解决方案，而是创建了一个 bool 类型的全局变量，因此在绘制数据表时，它会在 drawcall back 函数中查看全局变量是否设置为真与否，根据条件，它会分组或不分组，所以每次用户单击他/她想要分组的按钮后，我都会绘制表格

"drawCallback": function (settings) {
if(groupBy == true){

var api = this.api();
var rows = api.rows({ page: 'current' }).nodes();
var last = null;

api.column(3, { page: 'current' }).data().each(function (group, i) {
    if (last !== group) {
        $(rows).eq(i).before(
            '<tr class="group"><td colspan="5">' + group + '</td></tr>'
        );

        last = group;
    }

}

});
},