Nested datatables

arturEC

Hello!

I know this question has been asked multiple times and I've tried to go through the provided answers but I still can't get my head around a proper solution.

What I am trying to achieve is something like this http://jsfiddle.net/rafael_cichocki/WwDg8/7/ but with data being taken dynamically from MySQL database.

I have one datatable with data as visible on the screenshot here

What I want to achieve is that when I press the "+" button, the datatable expands and show previous results for that specific store. Do I need to initiate another table for each store, which is hidden by default and shown when the button is pressed with

$( row.child() ).DataTable();
tr.addClass('shown');

Or what is the best approach to this?

I have gotten as far as having this

$('#tbl_leader_board tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
           $( row.child() ).DataTable();
            tr.addClass('shown');
        }
    } );

So I just need to know what approach I should take from now on

kthorngren

If the data you want to display in the child table is available from the original response then you can simply use the format() function similar to this example to display the extra data:
https://datatables.net/examples/api/row_details.html

However if you need to retrieve the data each time the child is opened this blog should help you to get started.
https://datatables.net/blog/2017-03-31

Kevin

arturEC

@kthorngren the child table would be in the same format but I think the way I am generating the data might not be suited to do that.

I have pasted my code into pastebing: https://pastebin.com/qiLr4T09

I am not fetching the child data in the current code, but if I was to do so, is it an option to make the child <tr> hidden as default and then show when needed? Or is there a better approach that you can suggest?

kthorngren

is it an option to make the child <tr> hidden as default and then show when needed?

Yes, the example starts with all child detail rows hidden. Clicking the + button displays the details.

Kevin

arturEC

@kthorngren Ok so I think my case is a bit more difficult. Or I am missing something very obvious.

I have added a code to fetch all the data that I require. I have added

<tr style='display:none;'>

property to the rows that I want to hide. Which works fine and hides them. But here is where my problems start.

1. I am sorting the datatable by GP, which is column 8. This means that even the hidden results are affected by this sort and are not inserted under the parent.
2. How do I approach showing those <tr> rows? I have tried the obvious

$('#tbl_leader_board tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        tr.css('display','block');
});

But that just makes a huge mess out of the table. Here is my updated code https://pastebin.com/ZxA2bExU

kthorngren

That is a lot of code to look through to try and figure out what you are doing. Can you maybe post in the thread just the pertinent parts of your code? Better yet a link to your page or a test case replicating your issue would help us to help you.

I have added <tr style='display:none;'>

Are you trying to implement child detail rows like this example?
https://datatables.net/examples/api/row_details.html

Or are you just trying to hide rows in the table? Sounds like this is the case. In this case yes they will be sorted etc based on the Datatables data cache. Datatables doesn't know anything about hidden rows since you are not using Datatables API's to manipulate the table.

If you want to implement something like the example then the detail data is not expected to be a row in the table. To display the details the row.child( format(row.data()) ).show(); is used to display the detail data. In the example it is showing the extension which is returned as part of the original data set of the row but it not displayed in the table. It is also displaying the name which is the name displayed in the parent.

If you look at the original example you posted it is functioning similar to the row details example but its using the legacy fnOpen instead of '-api row().child(). It is displaying the HTML from the original table using this: oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, TableHtml), 'details');`

This page shows the conversion from legacy to current parameters:
https://datatables.net/upgrade/1.10-convert

I might be missing it but I don't see either fnOpen or row().child() in your code.

Kevin

arturEC

@kthorngren I will message you the link address and login details to access the page to have a look at it. Although you wont be able to see any of the PHP parts.

I think my problem is that I am inputting the data into the datatable using PHP echo in the same file rather than using a separate file and using json_encode. If that's the case, I will have to look at rewriting the whole page, unless there is another solution that we can come up with. Thank you for your support so far!

kthorngren

I tried your link and see three rows of data. I click on the rows but nothing happens, ie, the click event you noted above. I'm not sure what you want me to look at.

You still haven't answered the question of whether you are trying to implement child detail rows as in this example:
https://datatables.net/examples/api/row_details.html

Or something else.

Kevin