Datatables Row Grouping not working with Ajax

Question

I have a datatable for roles that is supposed to order it by row using the rowgrouping extension from datatables official site but it is not grouping and I see no errors... I suppose it could be due to the table being generated with ajax?

I've tried different ways but can't make it work. any help?

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;
}

roles-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

In your code, the rowGroup: initialization option:

rowGroup: {
    dataSrc: 0
}

is nested into the buttons: [] option, but it should stay at the highest level (i.e. same level of dom:, pageLength:, processing:, buttons: [], responsive: options).

See a screenshot from Official extension page:

The same - by the way - is happening for the order: option:

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

that in your code is nested inside buttons:[].

Finally, consider that the same official page linked above, explicitly informs that there are some limitations when using Buttons and RowGroup extensions together:

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