Newbie Question on Parent/Child display handling using JS

inkratas

Hello, I'm getting familiar with the environment and cannot seem to find the answer to the following:

I am using DataTables to set up a Parent/Child display, much like the Office Example in the tutorial. However, I'm noticing that none of the JavaScript interacts with the DataTables, as there is nothing rendered in the DOM (it's all referenced via the Script Tag).

I'm sure I'm missing something super simple, or incorrectly thinking that this service runs in a way that it doesn't in reality.

Here's a dump of the simple example I'm trying to get working. Keep in mind, I can see the two tables on my web server. So I'm connecting to the tables just fine and I'm using PHP to generate the access token, so no problems there.

As far as the setup of the tables, I added a linked field to the parent table and pointed it to the child table. That gives me the "l-2" ID you'll see in the script below. But without a primary key to bind the parent and child to, how do the child rows appear? I thought I would need to create something like a row_id sequence, and then make that field the link between parent and child, like in a relational style, but it appears things work differently here. Any advice would be great, or if there's an example page that I might have missed.

https://playcode.io/1212197

(I pasted the code into a JS sandbox, so you won't be able to run the example since it includes PHP for generating the token.)

Thank you!

allan

Hi,

It is this CloudTables example that you appear to be referring to.

The way that example works is by injecting a client-side filter to the child table. That filter (added in the start() function) operates by simply removing any rows from the child table that aren't linked to the host row's id.

It is worth noting that this is a bit different from how Editor's parent / child example operates, which is to Ajax load the filtered data, rather than filtering it on the client-side.

I'm noticing that none of the JavaScript interacts with the DataTables

As long as your ids for the tables are correct - then the code you have there should operate in the same way as the CloudTables example.

Allan

inkratas

Allan, thank you for your input so far as I continue to evaluate CloudTables.

I'm throwing my hands up! I'm out of ideas... I decided to create a serverless example for you so you can see the exact situation in live.datatables.net (using my read-only key, which is fine).

https://live.datatables.net/gofoyifi/1/edit?html,console,output

If you have any ideas as to what I'm doing wrong, advice would be highly appreciated.

The objective of this example is simply to click on a row in the parent table, and have it show related products in the child table.

As I said before, I'm not understanding how the Primary Key is being managed. In CloudTables, I:

1. Created the parent and child tables
2. Created a linked field in the parent table that points to the child table
3. Copied the l-2 value into the jQuery script in index.html to establish relationship

It seems like everything would work if I can just get parent.table and child.table to be something other than 'null'.

Note: the row_id field is just a test; I wasn't sure if I had to have the same field names in both parent/child tables in order for the DataTables library to work.

That leads me to one last question: Can different parent table fields become clickable to trigger displaying associated child tables through the css display property? Or is DataTables limited to showing child tables based on a row-click only?

Thanks for your help.
Steve

inkratas

I am hoping to get some help, as this is still an issue for me. If anyone has a minute to evaluate the issue, it would be much appreciated.

The only thing that changed in the original example is that l-2 is now l-6, as I eliminated the old linkage and created a new one.

Thanks for any help you can provide.