How to populate child table with a button?

gh2m · July 2020

Test Case: http://live.datatables.net/zefusufa/1/

when I click Create a nested table with data button then the green + sign with circle, the child data is not there for some reason. The issue is probably at function appendSelectedControls. No error but the data is just not there. Any ideas?

allan · July 2020

I’m using an iPad at the moment, which isn’t ideal for web-dev, so I might be missing something, but:

row.child( format(row.data()) ).show();

I don’t think format exists does it? format1 does, but it just returns an empty table and then doesn’t do anything with it.

Allan

gh2m · July 2020

I updated Test Case (http://live.datatables.net/zefusufa/3/) and only using format1 but it is still not working. I am using processautoteststep to add a new row to #testStepTable table and at the same time initiate teststepchild1 child table. When I try to click the green plus sign at the row I just created, I don't see my child table.

kthorngren · July 2020

When adding the new row you are using this to create the child:

row(this).child(format1(row(this).data(), nextteststepnumber)).show()

row(this) won't return the row API which is why it is not working. I updated you code like this:

    var newRow = row.add({ icon:null,
          teststep:nextteststepnumber,
          testid:data1[0],
          testname:data1[1],
          testdesc:data1[2]
    }).draw();  //populate test step to tbltstep datatable

    newRow.child(format1(row(this).data(), nextteststepnumber)).show();
        newRow.nodes().to$().addClass('shown');
    var rowData = row(this).data();
    var id = "teststepchild" + nextteststepnumber;

The row.add() API returns the API instance of the new row. It is assigned to newRow which can now be used to show the new row. Also added code to add the shown` class and updated your table ID to use the counter so you can add multiple rows.

http://live.datatables.net/jagihipe/1/edit

Kevin

gh2m · July 2020

The updated Test Case expired for some reason. I had to make another one
http://live.datatables.net/cugaqaqe/1/

After I click Create button, a row data is added to testStepTable. But when I expand (click the green plus button) I see a line right below the newly added row but no data. Inspection shows this new line is teststepchild1 table.

kthorngren · July 2020

Did you look at the test case I updated for you?
http://live.datatables.net/jagihipe/1/edit

Kevin

gh2m · July 2020

You test case works when I first click Create button. But when I collapse (minus sign) and expand (plus sign) again, the data is gone. Why is that? I think you are very close.

gh2m · July 2020

Inspection shows re-open(re-expand) is pulling teststepchildundefined table. So I changed, in my file, line below // Open this row
row.child(format1(rowData+1)).show();

just to make sure I am pulling teststepchild1 table which it does but the data is not show. Eventually I need to make it dynamic of course, i.e., first row re-expand showing teststepchild1, second row re-expand showing teststepchild2, etc.

gh2m · July 2020

Hi Kevin, any ideas/suggestions? It's probably has something to do with referencing the child table teststepchild1 at the time of expanding (click + sign) the parent row. But I just can see it for some reason. There is no error either.

kthorngren · July 2020

You need to find a consistent way to generate the ID for the child table. First decide if you need the child to have an ID. Your example is generating an ID number and appending it to the string "teststepchild".

Your function format1(d, tsnum) function expects two parameters but in your click event you are passing just one parameter - the row data and not the tsnum parameter. My suggestion is to eliminate this parameter and use a unique value from the parent's row data to append to `"teststepchild".

Kevin

gh2m · July 2020

Yes, that's what I am trying to do but having some difficulty. Here is my new Test Case: http://live.datatables.net/jagihipe/2/edit

I am trying to use Test # column value of the parent row, a sequential number as the child table id to tie the child to the parent. That is teststepchild1, teststepchild2, etc. But I have trouble referencing the child table when re-open it. I use row.child(format(rowData, 1)).show(); to see if I can at lease re-open the first child table but with no luck. Ideally I need to replace 1 with the corresponding parent Test # and get the child table show when I click minus and then plus sign again. Any help would be greatly appreciated.

kthorngren · July 2020

There are a couple things missing. One is you need to initialize the Datatable and add the data to the child in the click event. Same as in the processautoteststep() function.

Second is remove the use of the nextteststepnumber to generate the child table ID and use the data from the parent row. For example:
var id = "teststepchild" + newRow.data().teststep;

Here is the updated example:
http://live.datatables.net/jagihipe/3/edit

Kevin

gh2m · July 2020

This works with creating child table and re-opening it. Thank you very much. I must have misunderstanding of how child table works. I thought once it is created it will be under that parent row without having to re-initializing it when I try to close/re-open the parent row. My data for child table is hardcoded in appendSelectedControls for this test case. Real data is dynamically built at the time of click Create button in processautoteststep and no longer available after that. In other words I can't really use appendSelectedControls to populate data in the event listener section again. That is just my quick test to see data in the child table, sorry for the confusion. Can I pull the child table with data that is created at processautoteststep? It seems to me the child tables initially created and re-initialized are different tables/objects although they reference the same table id teststepchildx. Am I wrong?

kthorngren · July 2020

I must have misunderstanding of how child table works. I thought once it is created it will be under that parent row without having to re-initializing it when I try to close/re-open the parent row.

You can do that. Use row.child.show(); instead of row.child(format(rowData)).show();. Note no () after child. Here is the updated example:
http://live.datatables.net/jagihipe/4/edit

Kevin

gh2m · July 2020

Wow. This is exactly what I was looking for. I should have thought about that since I already have row.child.hide() there in the same if statement. I have been over thinking and forgot about the basics You are the men. I love this datatable stuff. I really appreciate your help!

gh2m · July 2020

What's the best practice to store this kind of parent/child table date in the back-end SQL table. Is there an example on this platform?

kthorngren · July 2020

There are a couple blogs you might be interested in. First is the Ajax loaded details row and the other Parent Child editing of detail rows.

Kevin

gh2m · July 2020

Thanks. Will check it out.

gh2m · July 2020

I am running some issues with pulling saved data from server.
Here is my test case: http://live.datatables.net/kiluxeso/1/edit

Array is populated at the start of the page by server agent into dataSetTestSteps and I can see the data by viewing source as follows:
var dataSetTestSteps = [
["class=details-control", 1,1001,"test name1","test description1"],
["class=details-control", 2,1002,"test name2","test description2"]
];

DataTable tblteststep is initialized with data: dataSetTestSteps

But data is not showing in the Output page. What's the issue here? I am not pulling any child table data at this point, only the row data for the parent table. I hope that's not the issue.

kthorngren · July 2020

Take a look at the browser's console and you will see this error:

Ignored call to 'alert()'. The document is sandboxed, and the 'allow-modals' keyword is not set.

Your Datatables initialization is causing an alert message. To see the alert click in the Live Preview arrow in the Output tab (top right). You will see this alert:

DataTables warning: table id=testStepTable - Requested unknown parameter 'teststep' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4

You are using columns.data to define the columns. Datatables expects and array of objects. But dataSetTestSteps is an array of arrays. Change it to an array of objects to match your defined structure and it will work.

Kevin

gh2m · August 2020

That works. Thanks. Here is the updated test case http://live.datatables.net/sogisohi/1/edit

Now how do I get my server side child data back under the corresponding parent row? Since the child datatable is dynamically built by click a button, I don't have dataset available at the time the page is loaded.

kthorngren · August 2020

See this blog about Ajax loaded child rows.

Kevin

gh2m · August 2020

Before I try that is there a way to load all the rows with the corresponding child tables at the time of page initial loading since I have everything available in the SQL table?

kthorngren · August 2020

Its up to you how you obtain the child row data. It can be part of the Datatables row data like the example. You can load it via a separate jQuery Ajax request and store in a global variable that is used in the format function. You can load it via ajax each time you open the row as discussed in the blog. There are no restrictions or requirements from Datatables. You just need to be able to access the data to display in the child.

Kevin

gh2m · August 2020

Okay, I tried ajax call but for some reason the response data does not show, it only shows loading... message.

I used F12, Network tab to check the server response:
Headers: Status Code: 200 OK
Preview: {"html":"test html"}
Response:
<html>
<head>
</head>
<body text="#000000">
{"html":"test html"}
</body>
</html>

Whereas the blog Network shows slightly different:
Preview:
{,...}
html: "Details for <b>Airi Satou ..."
Response: {"html":"Details for <b>Airi Satou<\/b><br><br>Full information ..."}

I am using lotusscript agent on Domino server to generate json string as follows:
json = |{"| & "html" & |":"| & "test html" & |"}|

I am not sure why my server Response has <html>...</html> stuff or if it matters.

Can you tell what's the issue here?

gh2m · August 2020

Found the issue. I forgot to set the header.

Print |content-type: application/json|
Print json

How to populate child table with a button?

How to populate child table with a button?

Answers

Howdy, Stranger!

Categories

DataTables

How to populate child table with a button?

How to populate child table with a button?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables