Preventing child nested datatable from displaying
Preventing child nested datatable from displaying

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
Sounds like you are doing something like this blog example. The child table, in the example, looks like this:
One option might be to use the
xhr
event for the child Datatable and show/hide thediv
that the child table is in. For example:Where
#my-dt-div
is thediv
container containing the child table. I didn't test this code so it me need some debugging to get working.Kevin
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.
Kevin,
That worked great!
Can I somehow prevent the create/edit/delete buttons from appearing if the length is 0?
Use
buttons().container()
to get the button's container element. Then useshow()
andhide()
. For example:https://live.datatables.net/kiyowore/1/edit
Keivn
Thanks! I have not yet implemented it, but you have an amazingly robust framework!
Kevin,
That, plus the code from the Parent/Child example get rid of everything.
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!
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
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()
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??You can move the
row.child( table ).show();
insideinitComplete
of the child table. For example:Use
count()
to count the number of rows. Usecolumns.adjust()
to recalculate the column widths after the hidden table is shown. See this example for details.Kevin
I had tried that last night, but without the
row.child( table ).show();
in the "normal" place,initComplete
is never triggered.Perhaps you can link to a test case showing the issue please.
Allan
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?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>
.