数据表行分组不适用于 Ajax

Question

我有一个角色数据table，应该使用 datatables official site 中的行分组扩展按行对其进行排序，但它没有分组，我没有看到任何错误...我想是的可能是由于 table 是由 ajax?

生成的

我尝试了不同的方法，但无法使它起作用。有帮助吗？

Table:

<table class="table align-middle table-striped table-row-dashed fs-6 gy-5" id="roles">
    <thead class="thead-light">
        <tr>
            <th>Group</th>
            <th>Rol</th>
            <th>Description</th>
            <th>Users with rol</th>
            <th>Actions</th>
        </tr>
    </thead>
    
    <tbody id="tBody">

    </tbody>
</table>

<script type="text/javascript">
    $(document).ready(function(){
        getRoles('<?php echo $users_perms ?>');
    });
</script>

Js:

// GET USERS

function getRoles(perms) {
    $('#tBody').html('');
    $.ajax({            
        type : 'POST',
        url  : './index.php?module=users&action=roles-get',
        data : {'perms' : perms},
        success :  function(data) {
            $('#tBody').append(data);
            $('#roles').DataTable( {
                dom: "<'row'<'col-md-4'B><'col-md-4'f><'col-md-4'p>>" +
                       "<'row'<'col-md-6'><'col-md-6'>>" +
                       "<'row'<'col-md-12't>><'row'<'col-md-4'l><'col-md-4'i><'col-md-4'p>>",
                buttons: [
                    {
                        extend: 'collection',
                        text: '<i class="la la-download"></i> Export',
                        autoClose: true,
                        className: 'btn btn-primary btn-icon-sm btn-square dropdown-toggle',
                        order: [[0, 'asc']],
                        rowGroup: {
                            dataSrc: 0
                        },
                        buttons: [
                            {
                                extend: 'copyHtml5',
                                text: '<i class="fas fa-copy"></i>\xa0\xa0  Copy',
                                exportOptions: {
                                    columns: [ 1, 2, 3 ]
                                }
                            },
                            {
                                extend: 'excelHtml5',
                                text: '<i class="fas fa-file-excel"></i>\xa0\xa0  Excel',
                                exportOptions: {
                                    columns: [ 1, 2, 3 ]
                                }
                            },
                            {
                                extend: 'csvHtml5',
                                text: '<i class="fas fa-file-csv"></i>\xa0\xa0  CSV',
                                exportOptions: {
                                    columns: [ 1, 2, 3 ]
                                }
                            },
                            {
                                extend: 'pdfHtml5',
                                text: '<i class="fas fa-file-pdf"></i>\xa0\xa0  PDF',
                                exportOptions: {
                                    columns: [ 1, 2, 3 ]
                                }
                            },
                            {
                                extend: 'print',
                                text: '<i class="fas fa-print"></i>\xa0\xa0  Print',
                                exportOptions: {
                                    columns: [ 1, 2, 3 ]
                                }
                            },
                            'colvis'
                        ],
                        fade: true,
                    }
                ],
                pageLength: 25,
                processing: true,
                responsive: true
            });
        },
        complete: function() {
            setTimeout(function() {
            }, 15000);    
        }
    });
    return false;
}

角色-get.php

<?php
$users_perms = $_POST['perms'];
$a = new SQLMan();
$a->tablename = "users_rol";
$autores= $a->select("","",$where="");

foreach($autores as $autor):?>
<tr class="">
    <td><?php $rolgroup = classUsers::getRolGroupByID($autor->fields["rol_category"]); echo $rolgroup->fields['name'];?></td>
    <td><?php echo $autor->fields["name"]; ?></td>
    <td><?php echo $autor->fields["description"];?></td>
    <td><span class="badge badge-square badge-success"><?php echo classUsers::getUsersWithRol($autor->fields["id"]);?></span></td>
    <td>
        <a href="<?php setURL(); ?>./users/user/<?php echo $autor->fields["id"]; ?>" class="btn btn-light-primary btn-sm btn-icon" title="View User">
            <i class="fas fa-eye"></i>
        </a>
        <?php if ($users_perms > 1) { ?>
        <button class="btn btn-light-warning btn-sm btn-icon btn-user-edit" title="Edit User" data-placement="bottom" title="Edit User" data-id="<?php echo $autor->fields["id"]; ?>">
            <i class="fas fa-edit"></i>
        </button>
        <?php } else {} ?>
        <?php if ($users_perms == 10) { ?><a href="./index.php?module=users&action=user-del&id=<?php echo $autor->fields["id"]; ?>" id="btn" class="btn btn-light-danger btn-sm btn-icon btn-user-del" title="Delete User" data-name="<?php echo $autor->fields["id"]; ?>" data-kt-users-table-filter="delete_row">         
            <i class="fas fa-trash-alt"></i>
        </a><?php } else {} ?>
    </td>
</tr>
<?php endforeach; ?>

Answer 1

在您的代码中，rowGroup: 初始化选项：

rowGroup: {
    dataSrc: 0
}

嵌套在 buttons: [] 选项中，但它应该保持在最高级别（即与 dom:、pageLength:、processing:、[=13 相同的级别=]、responsive: 个选项）。

查看来自 Official extension page 的屏幕截图：

顺便一提，order: 选项也是如此：

order: [[0, 'asc']],

在您的代码中嵌套在 buttons:[].

中

最后，请考虑上面链接的同一官方页面，明确告知在同时使用 Buttons 和 RowGroup 扩展时存在 一些限制：

No support for the export options of the Buttons extension - the grouping information is just ignored

数据表行分组不适用于 Ajax

Datatables Row Grouping not working with Ajax

datatables