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

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

13»

Answers

  • JohnWIck95JohnWIck95 Posts: 55Questions: 2Answers: 0
    edited September 2020

    It's like a detail of content , i mean :

    Level 0 : id_user, name, lastname
    - Level 1 : id_user, product1, numberOfProduct (from other api url)
    - -Level 2 : id_user, product_1_1 (from other api url)
    - -Level 2 : id_user, product_1_2
    - Level 1 : id_user, product2, numberOfProduct
    Level 0 : id_user, name, lastname

  • JohnWIck95JohnWIck95 Posts: 55Questions: 2Answers: 0

    And i just need to show the 4 level graph and table
    like in this example http://live.datatables.net/fecunaho/69/edit
    I couldn't :neutral:

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    Sounds like the issue is you want to access data from the previous child (maybe) to build the URL and Ajax data. What is unclear to me is what data you are needing and where is can be found. Is it something you can pass. as parameters when you call createChild()?

            } else {
                // Open this row
                createChild(row, 1, row.data());
                tr.addClass("shown");
            }
    

    Kevin

  • JohnWIck95JohnWIck95 Posts: 55Questions: 2Answers: 0
    edited September 2020

    Thanks for your reply.
    I recover the data correctly with you example at the level 0. But at the level 1 the data doesn't shows i don't know why (there's no problem on the api url, i get the wanted data on the console).

    In other hand, in my previous version of the child tables, I've get the action of the '+' button at the level 2 (if we consider that the first rows are level 0) but it works wierdly on the on the ch2_row.child.isShown() test. And that's why when i click i've the action of an alert but the table disappear and shows the level 1 row closed instead of showing the level 3 table.

       if ( ch2_row.child.isShown() ) {
            // This row is already open - close it
            ch2_row.child.hide();
            ch2_tr.removeClass('shown');
            console.log("okIsShown");
            alert("ok");
        }
        else {
            // Ouverture de la ligne
            ch2_row.child( '<table id="tableLevel3">'+ ....
    

    What i need :
    - Level 0 : id_user, name, lastname
    -- Level 1 : id_user, product1, numberOfProduct (from other api url)
    -- -- Level 2 : id_user, product_1_1 (from other api url) + Graph
    -- -- -- Level 3 : id_user, product_1_1_1, info (from other api URL)
    -- -- Level 2 : id_user, product_1_2
    -- Level 1 : id_user, product2, numberOfProduct
    - Level 0 : id_user, name, lastname

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    But at the level 1 the data doesn't shows i don't know why (there's no problem on the api url, i get the wanted data on the console).

    Its very hard to say without actually seeing the problem. Take a look at your browser's console to see if there are errors.

    Kevin

  • JohnWIck95JohnWIck95 Posts: 55Questions: 2Answers: 0
    edited September 2020

    Thank you for your response. I have tried to correct my first version. i get correctly the click. But the level 3 table and graph aren't displayed.
    I have done this, but it seems that i didn't the get the different elements correctly that's why the level 3 table and graph doesn't shows up.

    childTable2.on('click', 'td.details-control2', function () {
       // '.child_table tbody').off().on('click', 'td.details-control1',
    
        var ch2_tr = $(this).closest('tr');
        var ch2_row = childTable.row( ch2_tr );
        var ch2_rowData = ch2_row.data();
        
    

    The ch2_row_child.isShown() is false in if and else statement so i think i didn't get the row correctly.

    if ( ch2_row.child.isShown() ) {
            // This row is already open - close it
            ch2_row.child.hide();
            ch2_tr.removeClass('shown');
            console.log("okIsShown");
            alert(ch2_row.child.isShown());
        }
        else {
            alert(ch2_row.child.isShown());
          // table doesn't shown
    }
    

    I have also some issues when i try to recover the sevral rowData (c_rowData, etc.) from the different level's tables. I can only recover the first var rowData.

    John

  • JohnWIck95JohnWIck95 Posts: 55Questions: 2Answers: 0
    edited September 2020

    Well, I've done some debug and i found that the rowData of the previous tables works. I mean on the console. So the problem is in the way i try to construct the level 3 :

        var ch2_tr = $(this).closest('tr');
        var ch2_row = childTable.row( ch2_tr );
        var ch2_rowData = ch2_row.data();
    

    I don't know where is the problem

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    Please provide a link to your page or a test case showing the issue. Update the one we've been using if you like. Just use the hard coded Ajax URL so data is fetched. We will need to see the problem to help debug. Just seeing a few lines of code doesn't allow us to see the full context of what is happening.

    Kevin

  • JohnWIck95JohnWIck95 Posts: 55Questions: 2Answers: 0

    Thanks Kevin for the advices. I have found a way to show the tables.
    But I couldn't show the properly the graph and the row details in a modal.
    Like this : https://datatables.net/extensions/responsive/examples/display-types/jqueryui-modal.html
    I don't know why this example didn't work on my app

  • JohnWIck95JohnWIck95 Posts: 55Questions: 2Answers: 0

    Another problem my friend, it's that the thead doesn't shows up for the tables of the the level 2 et 3 (if we take the first row as level 0). I don't why and how i can correct that

  • JohnWIck95JohnWIck95 Posts: 55Questions: 2Answers: 0

    I want to have this but it doesn't work and i haven't have the '+' boutton.
    I don't know. can yopu help me please to make it work.

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    The modal example you linked to is for the Responsive extension, which while similar, is a different solution. You will need to create a format function to open the child into a modal. I don't have examples but you can probably find something on the forum that discusses open Datatables into a modal to start from.

    Another problem my friend, it's that the thead doesn't shows up for the tables of the the level 2 et 3 (if we take the first row as level 0).

    Again that would be something we will need to see. Can you provide a link to your page or a test case showing the issue? If you create a test case we can also help with any questions you have for opening the child into a modal.

    Kevin

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    Colin's answer in this thread from today might help you with the modal.

    Kevin

  • JohnWIck95JohnWIck95 Posts: 55Questions: 2Answers: 0

    Thank you for your time and your responses. I could recreate a test case to sho the issue but it will be complicated to maintain properly and will take time, that's why.

    I have the modal and my graph with JQuery Modal but i can't modify the width of the modal and it's has a quite bad looking.

    But wanted to have the Jquery and Datatables dialog effect. I'm trying to add a button or on the click of the '+' button and then show the dialog with the chart. But on the click of a button that i've at add a the same position of the '+' button, the dialog doesn't shows up.

    I will try to give you an test case, if i you couldn't find a solution. But if you have any clue, please feel free to tell me your idea.

  • JohnWIck95JohnWIck95 Posts: 55Questions: 2Answers: 0

    Kevin,
    I've found a way to get the click of the '+' button and to show the Jquery UI dialog.
    it's not perfect but i'm trying to modify the solution. I will let you know if i've a probelm with that.
    Thank you once again for your help

  • JohnWIck95JohnWIck95 Posts: 55Questions: 2Answers: 0

    Hi,
    I need help to keep only one child row opened at a time. That's mean that when we opened a child row detail and we decide to consult another, the child row, which was opened, is closed .

    Or if it's possible to keep open all the child when we click on the '+' button. Because it's work for the previous rows of the row where the child row detail is open but for the rows that are after it popups an error message
    "DataTables warning: table id=detail - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3"

    Thanks in advance

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • JohnWIck95JohnWIck95 Posts: 55Questions: 2Answers: 0

    It's ok i find a solution.
    Thanks to you and Kevin

    Have a great day,

    John

  • JohnWIck95JohnWIck95 Posts: 55Questions: 2Answers: 0
    edited September 2020

    Do you know how to have thousands sperated with space, please ?
    I've tried

    language : {
    "thousands":" ' "
    } 
    

    And also this in the render of the columnDefs :
    return d.replace(/\B(?=(\d{3})+(?!\d))/g, ",");

    And it doesn't works.

    And also i want to make a difference between the child rows so i wanted to add background color like in this test case. But it doesn't fit for my uses.
    Can you help me with that please?

    Thanks in advance.

    John

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    I believe language.thousands is for the information elements that Datatables displays and not for the table data. You can use a number renderer to format the row data numbers.

    want to make a difference between the child rows so i wanted to add background color like in this test case

    The link doesn't seem to work. Styling issues are specific to each page. To help we will need a link to your page or a test case showing the issue.

    Kevin

This discussion has been closed.