Preventing child nested datatable from displaying

menashe

I have a (large) table with items. In a second table, I have implemented a parent-child relationship between items. When I display my main table, items that are children do not display; when I select an item that is a parent, then the children items appear below that parent in a "nested" child Datatable.

How do I implement a mechanism where if the PHP request return no children, then I do not attempt to display the child table (and especially not get the create/edit/delete buttons)?

Thanks

kthorngren

Sounds like you are doing something like this blog example. The child table, in the example, looks like this:

var usersTable = $('#users').DataTable( {
    dom: 'Bfrtip',
....
});

One option might be to use the xhr event for the child Datatable and show/hide the div that the child table is in. For example:

var usersTable = $('#users')
.on('xhr.dt', function ( e, settings, json, xhr ) {
        if ( json.data.length === 0 ) {
          $('#my-dt-div').hide();
        } else {
          $('#my-dt-div').show();
        }
    } )
.DataTable( {
    dom: 'Bfrtip',

Where #my-dt-div is the div container containing the child table. I didn't test this code so it me need some debugging to get working.

Kevin

menashe

Kevin,

Thank you! I had seen that example over the last year or so, but... forgot!

That looks as though it will answer my question. I have to run, so I'll investigate later.

menashe

Kevin,

That worked great!

Can I somehow prevent the create/edit/delete buttons from appearing if the length is 0?

kthorngren

Use buttons().container() to get the button's container element. Then use show() and hide(). For example:
https://live.datatables.net/kiyowore/1/edit

Keivn

menashe

Thanks! I have not yet implemented it, but you have an amazingly robust framework!

menashe

Kevin,

That, plus the code from the Parent/Child example get rid of everything.

                    subitemsTable.buttons().container().hide();
                    
                    let table = $("table", row.child());
                    table.detach();
                    table.DataTable().destroy();

                    // And then hide the row
                    row.child.hide();

BUT... there is a "flash"--it appears and then disappears!

With Editor Forms, there are many cancellable events.

Is there anything like that for Datatables--cancel before the Buttons and empty table are drawn?

When I select a line, such as in the image below, I get the following (and then it quickly disappears):

When there are no Sub Item records I would like to see... NOTHING!

kthorngren

Based on your code snippet it doesn't seem like you are using the example I initially linked to. Instead it sounds like you are doing something like this child detail rows blog. Assuming you are following this guide you can probably update the createChild() function to check how many rows are in the table. If there are no rows then don't use row.child( table ).show();. The full solution might not be that simplistic.

If this doesn't help then post all of the Datatables related Javascript code so we can see what you are doing.

Kevin

menashe

You are correct, because your example has the line with "No Data Available in Table" at all times!

But I think that I may not understand something!

In createChild()

function createChild ( row ) {
    // This is the table we'll convert into a DataTable
    var table = $('<table class="display" width="100%"/>');
 
    // Display it the child row
    row.child( table ).show();
 
    // Initialise as a DataTable
    var usersTable = table.DataTable( {
        // ...
    } );
}

The var line creates HTML for the table.
Then, row.child( table ).show(); displays that empty table.
Only after that does table.DataTable create the data for the table.

How do I know before the row.child( table ).show(); that there is no data??

kthorngren

You can move the row.child( table ).show(); inside initComplete of the child table. For example:

initComplete: function(settings, json) {
  var api = this.api();
  var count = api.rows().count();

  if ( count > 0 ) {
    row.child( table ).show();
    api.columns.adjust();
  }
}

Use count() to count the number of rows. Use columns.adjust() to recalculate the column widths after the hidden table is shown. See this example for details.

Kevin

menashe

I had tried that last night, but without the row.child( table ).show(); in the "normal" place, initComplete is never triggered.

allan

Perhaps you can link to a test case showing the issue please.

Allan

menashe

What seems to work is display: none in the CSS. However, I have only been able to place it on the subitems wrapper.

How can I place that CSS on the outer-most <tr> for the sub item?

![](https://datatables.net/forums/uploads/editor/66/en62l3pq66lc.png "")

menashe

Yes, working perfectly--except for that little bit of padding from the <tr>.

Please advise how I can access it to modify the CSS display property of that outermost <tr>.