Строки таблицы группы DataTable, отображают заголовок столбца и делают их свертываемыми при загрузке

Question

Я пытался сгруппировать строки в таблице bootstrap, имеющей 2 столбца, используя jquery dataTables. Я могу сгруппировать их и отобразить сгруппированный текст по левому краю. Он также предназначен для свертывания сгруппированных строк при щелчке.

<table id="testTable" class="table table-bordered table-dark">
            <thead>
                <tr>
                    <th>Role</th>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Manager</td>
                    <td>Nags</td>
                </tr>
                <tr>
                    <td>Lead</td>
                    <td>Tim</td>
                </tr>
                <tr>
                    <td>Manager</td>
                    <td>Mark</td>
                </tr>
                <tr>
                    <td>Manager</td>
                    <td>Git</td>
                </tr>
            </tbody>
        </table>

Добавлен код ниже Jquery и внесены некоторые изменения, чтобы сделать сгруппированные строки разборными,

$(document)
        .ready(
                function() {
                    var table = $('#testTable').DataTable({
                            "columnDefs": [
                                { "visible": false, "targets": 0 },
                                { "orderable":false, "visible": true, "targets": 1 }
                            ],
                            "order": [[ 0, 'asc' ]],
                            "displayLength": 25,
                            "drawCallback": function ( settings ) {
                                var api = this.api();
                                var rows = api.rows( {page:'current'} ).nodes();

                                var last=null;
                                var groupadmin = []; 

                                api.column(0, {page:'current'} ).data().each( function ( group, i ) {
                                    if ( last !== group ) {                       
                                        $(rows).eq( i ).before(
                                            '<tr class="group text-left client-info" id="'+i+'"><td colspan="2">'+group+'</td></tr>'
                                        );
                                        groupadmin.push(i);
                                        last = group;
                                    }
                                } );

                                for( var k=0; k < groupadmin.length; k++){
                                    // Code added for adding class to sibling elements as "group_<id>"  
                                    $("#"+groupadmin[k]).nextUntil("#"+groupadmin[k+1]).addClass(' group_'+groupadmin[k]); 
                                    // Code added for adding Toggle functionality for each group
                                    $("#"+groupadmin[k]).click(function(){
                                            var gid = $(this).attr("id");
                                            $(".group_"+gid).slideToggle(300);
                                        });
                                }
                            }
                        } );            
                });