How to show in one row grouped data with aggreagates in Datatables ?

kthorngren

If you want to do everything in a child row then I think you will want to attach the child table to the tr you are returning in the startRender function. Also keep all of the standard rows hidden by changing this loop to set display none for all rows:

    rows.nodes().each(function (r) {
           r.style.display = collapsed ? '' : 'none';
        });

Kevin

JohnWIck95

Thanks for the info Kevin, i will check the link.

First of all, I have so many row with the same info that's why I wanted to grouped them with RowGroup. And after that, i'm doing some operations like a count on a test if a cell from a column is under < or higher > than a var.
Like this :
COUNT(CASE WHEN data1 > @var THEN 1 END) + COUNT(CASE WHEN data1 < @var THEN 1 END) as NB_TEST

But i'm planning to do these operations on the query for each row but then to sum them on the RowGroup.

John

kthorngren

First of all, I have so many row with the same info that's why I wanted to grouped them with RowGroup.

Makes sense. Why do you want to create child detail rows of them when clicking the plus sign instead of just showing them? Seems like a lot of work for something that is built in.

Kevin

JohnWIck95

Oh ok i see. I forgot that.
If i'm correct you mean that :
rows.nodes().each(function (r) {
r.style.display = collapsed ? 'none' : 'none';
});
Am i right ?
But sorry to bother, how can I attach the child table ?

I've tried this
// Collapse Groups
$('#rateCurve tbody').on('click', 'tr.dtrg-start', function () {
var name = $(this).data('name');
// var tr = $(this).closest('tr');
// var row = $(this).row( tr );
collapsedGroups[name] = !collapsedGroups[name];
table.draw(false);
format(row.data())
if ( row.child.isShown() ) {

        //row.child.hide();
        tr.removeClass('shown');
    }
    else {

        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
});

And this is the code to show the child table in the standars rows

/*
$('#rateCurve tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );

    var name = $(this).data('name');
    collapsedGroups[name] = !collapsedGroups[name];
    table.draw(false);

    if ( row.child.isShown() ) {

        row.child.hide();
        tr.removeClass('shown');
    }
    else {

        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );*/

Thanks for your help in advance

John

JohnWIck95

I want to creat child detail rows because the data aren't the same that those which are in the rowGroup.

You have so many lines and the level 1 have the same data on other row. So that's why i rowGrouped them. After i want to show the level 2 of the data, which contains values .

I hope you have understood me

John

kthorngren

Is the 2nd level of data the same number of rows or a summary of the rows? Maybe you can use rowGroup.endRender to display the 2nd level if the plus is clicked. Making the 2nd level a Datatable will make the process very complex. Maybe you can just build an HTML table.

Kevin

JohnWIck95

Yes thank you, that can be a solution.
The 2nd level it's a detail of the first row (rowGroup - startRender) and they contains sevral different and they aren't unique.

It's like you have a product and all the repated info will be on the row group and the rest under the rowGroup like the servral order of that product.

JohnWIck95

The probleme with the startRender and enRender it's that there is the group value which wasn't reparametrable. I mean we cannot call other value on the endRender.
If I call the group value there are the same value which were in the startRender.
I don't know how we can redefine the group value or how we can call other data.

By the way as i have said before i'm trying to recover data withe a new script i will try if it will work. If it's work i will tell

John

JohnWIck95

Now I have done directly the operation on the query.
So I don't really need to do some operations via Datatables.
But If I show the data on the table, then i have the same problem.
The rows with the same data are not grouped, they are repated.
And for the sub table the data aren't merge into one table.

I want to have a nested table. But i don't if i group the data in the api file it will change the json and so give me what i want. But i don't know how to do that.

I wanted to use this plugin but it doesn't work .

kthorngren

I wanted to use this plugin but it doesn't work .

That plugin looks interesting. Haven't seen it before. If its not working then you should contact the developer of the plugin for help.

Maybe using RowGroups is not the solution for you. Based on the example we worked on the actual row data you never want to show and is only used for summary data for the RowGroup. Maybe the row data should be the grouped information. Then you can show the child details form there which you can fetch via Ajax.

There may be something I'm missing with RowGroups but I think the only way you can use child details with RowGroups is to either attach them to the tr created with rowGroup.startRender or rowGroup.endRender. Like I mentioned before turning these into Datatables is going to be difficult.

Kevin

JohnWIck95

Kevin
I tried by doing two Ajax call (one for the main data and another for the child table).
And now i'm block with child table. I don't know how to use it in the "success" part of the ajax data recovery for the child table. I mean, i have tried by adding my previous table with the the data (for example <td>d.DATA<td>) .

But on the click on the '+' button, it calls correctly the webservices with the ID of the row. But as I have said before, the problem is now on the display of the data on the child table.

Thanks in advance

John

kthorngren

Its impossible to guess without seeing at least your code snippets and the ajax response using the browser's network inspector tools. Are you following the steps at the blog link I provided before?

Kevin

JohnWIck95

Here's is a test case http://live.datatables.net/komubuce/97/edit
I know it doesn't like what i've done (because it doesn't) because I don't know where and how i can put my child table in the success of the ajax.

Thanks in advance.

John

JohnWIck95

New edit http://live.datatables.net/komubuce/98/edit

kthorngren

This blog about parent/child editing has a good example of creating a Datatable out of the child row data. Ignore the Editor configuration. Basically you will need the createChild() and destroyChild() functions. In the createChild() function you will use your Ajax request and in the success function init Datatables against the table built in the createChild() function. Use data to use the ajax reqponse data.

There are also lots of threads on the forum about creating Datatables in the child using ajax. See the final example int this thread. The blog has a better structure but the example will help.

Kevin

JohnWIck95

Thanks for the advice i've tried but it doesn't work
I don't know if you an example with these kind of function. Could you help me with that, please?
Because I contact and recover the webservice for the id of the parent row correctly , but I'm unaible to recover the data.

<script>
function format ( d ) {
   var div = $('<div/>')
        .addClass( 'loading' )
        .text( 'Loading...' );

    /*    row.child( 
               '<table id = "child_details" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
               '<thead><tr><th></th><th>Name</th><th>Position</th><th>Extn</th></tr></thead><tbody>' +
                '</tbody></table>').show();*/

     /*   var childTable = $('child_details').DataTable({
            ajax: {
                url: '/api/details',
                data: {
                    val1: $("#val1").val(),
                    val2: $("#val2").val(),
                    val3: $("#val3").val(),
                    val4: $("#val4").val(),
                    id: d.ID_PARENT_TABLE
                }
            },
            columns: [
                {
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ''
                },
                { "data": "d.CHILD DATA 1" },
                { "data": "d.CHILD DATA 2" },
                { "data": "d.CHILD DATA 3" },
            ],   
        })
    
    return childTable;*/


    $.ajax( {
         url: '/api/details',
               data: {
                    val1: $("#val1").val(),
                    val2: $("#val2").val(),
                    val3: $("#val3").val(),
                    val4: $("#val4").val(),
                    id: d.ID_PARENT_TABLE
         }
        dataType: 'json',
        success: function ( json ) {*/
          /*  div
                .html( json.html )
                .removeClass( 'loading' );*/

      /*         return '<table id="rateCurveDetail" class="display" style="width:100%; border:black 0.5pt solid">'+
            '<thead>'+  
                    '<tr>'+
                        '<td></td>'+
                        '<td colspan="3" rowspan="1" style="text-align:center;">HEADER 1</td>'+
                        '<td colspan="3" rowspan="1" style="text-align:center;">HEADER 1</td>'+
                        '<td colspan="1" rowspan="1" style="text-align:center;">HEADER 1</td>'+
                        '<td colspan="1" rowspan="1" style="text-align:center;">HEADER 1</td>'+
                    '</tr>'+
                    '<tr>'+
                        '<td></td>'+
                        '<td>SUB HEADER 1</td>'+
                        '<td>SUB HEADER 1</td>'+
                        '<td>SUB HEADER 1</td>'+
                        '<td>SUB HEADER 1</td>'+
                        '<td>SUB HEADER 1</td>'+
                     //   '<td>SUB HEADER 1</td>'+
                     //   '<td>SUB HEADER 1</td>'+
                        '<td>SUB HEADER 1</td>'+
                        '<td>SUB HEADER 1</td>'+
                        '<td>SUB HEADER 1~~~~</td>'+
                    '</tr>'+
                '</thead>'+
                '<tr role="row" class="odd">'+
                    '<td class="details-control"></td>'+
                    '<td>'+d.CHILD DATA 1+'</td>'+
                    '<td>'+d.CHILD DATA 2+'</td>'+
                    '<td>'+d.CHILD DATA 3+'</td>'+
                    '<td>'+d.CHILD DATA 4+'</td>'+
                    '<td>'+d.CHILD DATA 5+'</td>'+
                  //  '<td>'+d.CHILD DATA 6+'</td>'+
                  //  '<td>'+d.CHILD DATA 7+'</td>'+
                    '<td>'+d.CHILD DATA 8+'</td>'+
                    '<td>'+d.CHILD DATA 9+'</td>'+
                    '<td>'+d.CHILD DATA 10+'</td>'+
                '</tr>'+
            '</table>';*/
            console.log(d.d.CHILD DATA 1); // Doesnt work
        },
        error: function () {
            $('#output').html('Bummer: there was an error!');
        }
    } );
 
    return div;
}
</script>

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

JohnWIck95

Kevin i've tried from start with this example and it works partiely.
I mean that i can't recover the ID data from the parent row (i do this like that id: d.DATA_ID_PARENT).

Do you know how i can recover the id of the parent table for the ajax of the ?

Thanks in advance.

John

kthorngren

Please use Markdown code formatting of triple back ticks (```) on new lines before and after the code block.

Do you know how i can recover the id of the parent table for the ajax of the ?

Are you saying id: d.ID_PARENT_TABLE doesn't work? What is your parent table's data structure? Do you get an error with d.ID_PARENT_TABLE?

Kevin

JohnWIck95

Thank you Kevin for your help.
It works, i have put the '''rowData''' var (''' id: rowData.ID_PARENT_TABLE ''') instead of the ''' d ''' var.

Thank you once again for your time and your help. I will may recontact post another message here if i have a problem and i couldn't find a solution

JohnWIck95

Hi,
I've found a way to have the data with aggregates and parent-child table structure.
But i've a problem with the level 3: I can't show get the click from the '+' button at the level 3 table.
You can check this example to understand my problem.
In the example, i've correctly the header of the table for the level 3 table. In contrary, in my app i do not have the header for my level 3 table. I show a graph before the table at the level 3.
I also wanted to have button on my level 3 table. On the clic of that button it will open a modal with a graph (plotyJS) and a datatable.

Thanks in advance
John

kthorngren

I'm not sure what the specific problem is but I have found trying to assign id to the child tables because problematic and is not needed. Unless you need the table id for something outside of the Child Details functionality you should eliminate it.

I created the below example from this blog entry. The example doesn't have the Editor part.
http://live.datatables.net/tefaxula/4/edit

The example uses one function for every level of child Datatables allowing for unlimited number of child Dataatable levels.

Kevin

JohnWIck95

Thanks Kevin for your answer. it doesn't correspond for what i need.
I mean i just need to get the third table '+' button is clicked and then show a child table or modal and into that modal another table.
http://live.datatables.net/fecunaho/63/edit
It seems at the beginning to be easy beacause i have the three tables but it isn't working for the forth one.

JohnWIck95

Even with this example http://live.datatables.net/fecunaho/69/edit
i didn't get the action of the clic on the '+'
I don't understand why.
Or if you have a solution to add bouton into a column with an id or some html.
It will be helpful to try to have modal.

JohnWIck95

Kevin,

Your example http://live.datatables.net/tefaxula/4/edit is interesting but i don't know how can make functionable from different ajax data.

kthorngren

Here is the same example with ajax calls for the children:
http://live.datatables.net/sawilite/1/edit

It is using a hard coded URL but you could use the level parameter to get the URL or pass it into the createChild()` as a parameter maybe.

Kevin

JohnWIck95

Thanks Kevin for your example.
I tried to implement your example and also your advice by passing the url of the api on the switch of the level.

But i'm blocked when i tried to recover data from another url. And my url uses the id (in your example the 'name') as an id and show the details.
i don't why it doesn't work.

Can you help me with that please ?
I think we've got someting

Thanks in advance.

JohnWIck95

Here's the problem
switch ( level ) { case 1: urlApi = "/api/datalevel1/level1"; // api URL urlApiParam ='p1='+$("#P1").val()+'&p2='+$("#p2").val()+'&p3='+$("#P3").val()+'&id='+rowData.id +'&date='+$("#DATE").val().split("-").join(""); // Parameters for the api url key = "ELEMENT_LEVEL1"; break; }

JohnWIck95

I have found the way to get the parent row id (parentData["ID_PARENT"])
So I get the data (I know by doing a console.log output on the console) but it doesn't shows up on the table level 1.

Could you help me please?

Thanks in advance

colin

Can you update Kevin's example to show what you're currently doing, please. It'll help understand where you're at.

Colin

JohnWIck95

Colin, here's the edited version of Kevin's example :
http://live.datatables.net/sawilite/10/edit

But i couldn't make it work because i don't have another api which was related with the current api of the example.

Thank you for your help