Show only the grouped rows in a table

Brian1204

I am using dataTables to show report data, and am new to its use.
I have searched the forum for similar issues, but haven't been able to get the examples working.
I am in an environment where I don't have the freedom to post examples online or download anything.

There are several different report views to render from the data set, all of which start with a Date row. The non-grouped reports are showing as expected.
Two of the report views should show only grouped data, not including the date column, grouped by at text column and showing the count of rows for that group.
My grouping is not apparently working, but no errors are being generated.
The grouped or summary reports are showing all rows, not just the grouped rows.

The data: 'TimeStamp','ActionName','UserName',(a few other columns).
The group is by 'ActionName' with the rowcounts to be displayed as 'Count'

Expected result:

Items Name                                   Total
Item 1                                                2
Item 2                                                4
Item 3                                                3
...

What I'm getting:

Items Name                                   Total
Item 1                                                0
Item 1                                                0
Item 2                                                0
Item 2                                                0
Item 2                                                0
Item 2                                                0
Item 3                                                0
Item 3                                                0
Item 3                                                0
...

This is the table definition for the group reports:

  table = $(id).DataTable({
                columnDefs: [
                    { target: 0, type: 'date' },
                ],
                dom: "<'row'f<'#filterToggle'>p>t<'row'il>rR", // R-colReorder Q-queryBuilder B-buttons l-rowsPerPage f-filter(search) t-theTable i-tableInfoSummary p-pagination
                initComplete: function (settings, json) {
                    // enable tooltips after table data loaded
                    window.initTooltips();
                },
                language: {
                    "info": "Showing _START_ to _END_ of _TOTAL_ items",
                    "sEmptyTable": emptyMessage,
                    "infoFiltered": "(filtered from _MAX_ total items)",
                    "lengthMenu": "Show _MENU_ rows",
                    "paginate": {
                        "next": "<span class='icon-arrowright3-black no-hover'></span>",
                        "previous": "<span class='icon-arrowleft3-black no-hover'></span>"
                    },
                    "searchPlaceholder": "Search Items",
                    "search": "",
                },
                order: [[1, sortDir]],
                rowGroup: {
                    dataSrc: 1,
                    startRender: null,
                    endRender: function(rows, group) {
                        return "<tr>" + group + "</tr>", "<tr>"+rows.count()+"</tr>";
                    },
                },
                scrollX: true,
                autoWidth: false,
                scrollY: "350px",
                scrollCollapse: true,
                fnDrawCallback: function () {
                    if ($(id + '_paginate span a.paginate_button').length) {
                        $(id + '_paginate')[0].style.display = "block";
                    } else {
                        $(id + '_paginate')[0].style.display = "none";
                    }
                }
            });

1. Is this doable with DataTables?
2. How?

Thanks
Brian

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

RowGroup does not provide a "tree" view in DataTables - i.e. you can't expand and collapse groups. It provides a visual indicator of a row only. See this example for a demonstration of that.

Have I understood correctly - you want to collapse the group?

Allan

Brian1204

Hi Allan thanks for the quick response.
No, I'm not wanting to expand/collapse or tree view.
We are rendering several reports on the page, but only one is visible at a time. The report to show is selected by a dropdown, which is not part of the datatable rendering.
I am trying to display just the grouped values for the two summary reports. We are trying to do it this way so that we can still use the Date Range filtering capability. It works great on the non-grouped reports.
I can post a simplified version of the cshtml code if that would be helpful.

allan

Is it the data that is being loaded into the table that is incorrect? Are you running a query to get the data? Is that query returning the expected rows?

Allan

Brian1204

Hi Allan
The data I'm getting is correct and good. it is the 'what I am getting' data in my first post, which is an ordered list of all detail records. What I'm trying to do is group those rows in DataTables and just show the group rows, not the detail rows. Does that make sense?

allan

It does now - thanks for the clarification. I sort of see that as a tree view which is collapsed.

It isn't something that DataTables / RowGroup is designed to do, but I suppose it is possible to hack it a little to make it display that way with CSS:

tr:not(.dtrg-group) {
  display: none;
}

You'd want to make sure you disable paging on the table. Also, filtering and sorting wouldn't work.

What I'd recommend is that you spin over the data and create the data you want to display first (or that could be done at the server-side to save unnecessary data from being transferred).

DataTables expects an object (or array) per row to display.

Allan

Brian1204

Ok, that's what I was beginning to understand. Thanks for the info!