DataTable Not Grouping like supposed to

zgoforth

I am creating a simple DataTable for to replace a list on a landing page for aesthetic purposes.

I have another DataTable that is perfect and looks like so.

The other list I am trying to do the same with, except the Program name I don't want to show because the page it is on is the program of the deliverable. I want the three child rows to stay the same, collapsible/expandable rows with the deliverables in them. For some reason, my script isn't correct (even though it should be).

Here is my code:

$(document).ready(function() {
    var collapsedGroups = {};
        var top = '';
        var parent = '';
        
  $('#myTable').DataTable( {
    "columns": [
      { "data": "Program",
        visible: false    },
      { "data": "Deliverable",
visible: false    },
      { "data": "To" },
      { "data": "Date" },
      { "data": "Approved" },
      { "data": "Notes" }
    ],
                order: [
                [1, 'asc']
            ],
            rowGroup: {
                dataSrc: [
                    'Deliverable'
                ],
                startRender: function(rows, group, level) {
                    var all;
                     if (level === 1) {
                        parent = top + group;
                        all = parent;
                        // if parent collapsed, nothing to do
                        if (!collapsedGroups[top]) {
                            return;
                        }
                    } else {
                        // if parent collapsed, nothing to do
                        if (!collapsedGroups[parent]) {
                            return;
                        }
                        all = top + parent + group;
                    }
    
                    var collapsed = !collapsedGroups[all];
                    console.log('collapsed:', collapsed);
    
                    rows.nodes().each(function(r) {
                        r.style.display = collapsed ? 'none' : '';
                    });
                    //Add category name to the <tr>.
                    return $('<tr/>')
                        .append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
                        .attr('data-name', all)
                        .toggleClass('collapsed', collapsed);
    
    
                }
    
            }
  } );
    
 loadData();
 $('#myTable tbody').on('click', 'tr.dtrg-start', function() {
            var name = $(this).data('name');
            collapsedGroups[name] = !collapsedGroups[name];
            table.draw(false);
        });
    
} );

zgoforth

https://jsfiddle.net/fbt0h2ag/3/

zgoforth

**I realized I am missing the rowgroup js library, but I added that and it still doesn't do it.

zgoforth

UPDATE
I have figured out the grouping, now I have fixed that. Another issue arises which is I cannot expand the rows. Why is that?

Here is what I changed -

startRender: function(rows, group, level) {
                    var all;
                    if (level === 1) {
                        top = group;
                        all = group;
                    } else if (level === 2) {
                        parent = top + group;
                        all = parent;
                        // if parent collapsed, nothing to do
                        if (!collapsedGroups[top]) {
                            return;
                        }
                    } else {
                        // if parent collapsed, nothing to do
                        if (!collapsedGroups[parent]) {
                            return;
                        }
                        all = top + parent + group;
                    }
    
                    var collapsed = !collapsedGroups[all];
                    console.log('collapsed:', collapsed);
    
                    rows.nodes().each(function(r) {
                        r.style.display = collapsed ? 'none' : '';
                    });
                    //Add category name to the <tr>.
                    return $('<tr/>')
                        .append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
                        .attr('data-name', all)
                        .toggleClass('collapsed', collapsed);
    
    
                }
    
            }

kthorngren

Hard to say. My suggestion is to start with debugging the collapsedGroups variable.

Kevin

allan

RowGroup doesn’t offer native collapsing, so there must be something going on in the start render code there. Did you write that or copy it from somewhere else?

Allan

kthorngren

I think Colin came up with collapsedGroups example to track whether RowGroups should be collapsed or not. Thats why I suggested debugging what happens with the collapsedGroups object.

Kevin

colin

Yep, this thread was the origin of that example,

Colin

zgoforth

@kthorngren @allan @colin I followed it, and it gives me an unexpected (table is not defined) at table.draw(false)

zgoforth

Fixed it. for my table declaration I had to change $('#myTable').DataTable( { to var table = $('#myTable').DataTable( {