Preventing child nested datatable from displaying

Preventing child nested datatable from displaying

menashemenashe Posts: 75Questions: 17Answers: 1

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 19,465Questions: 26Answers: 4,610
    Answer ✓

    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

  • menashemenashe Posts: 75Questions: 17Answers: 1

    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.

  • menashemenashe Posts: 75Questions: 17Answers: 1

    Kevin,

    That worked great!

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

  • kthorngrenkthorngren Posts: 19,465Questions: 26Answers: 4,610

    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

  • menashemenashe Posts: 75Questions: 17Answers: 1

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

  • menashemenashe Posts: 75Questions: 17Answers: 1

    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!

  • kthorngrenkthorngren Posts: 19,465Questions: 26Answers: 4,610

    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

  • menashemenashe Posts: 75Questions: 17Answers: 1

    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??

  • kthorngrenkthorngren Posts: 19,465Questions: 26Answers: 4,610

    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

  • menashemenashe Posts: 75Questions: 17Answers: 1

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

  • allanallan Posts: 60,303Questions: 1Answers: 9,791 Site admin

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

    Allan

  • menashemenashe Posts: 75Questions: 17Answers: 1

    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 "")
    
  • menashemenashe Posts: 75Questions: 17Answers: 1

    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>.

Sign In or Register to comment.