How to define parent child detailed row without AJAX data source using data table and Bootstrap 4 ?

Mr_Patel

Any one help me to understand how to implement parent child detailed row without AJAX data source like example mention in the below link ? And also how we can differ parent and child row ?

I need the explanation of example mention in below link
https://datatables.net/extensions/responsive/examples/styling/bootstrap4.html

kthorngren

That example show everything you need to use Responsive without Ajax loaded data. Maybe you can provide more specific questions. Start with this template example and build the responsive page:
http://live.datatables.net/

Then if you have questions we can look at the example you are buulding.

Kevin

Mr_Patel

I know how to use hard code HTML with data table, what I'm asking is how to use parent row detail feature with hard coded HTML table. Please see the below image. This is what I want to achieve with hard code html table.

kthorngren

Are you wanting to use Responsive or are you wanting to use the solution shown here, which is not using Responsive?
https://datatables.net/examples/api/row_details.html

Kevin

Mr_Patel

I don't want to use responsive, I would prefer below example, but difference is that, I want to use detailed information row with hard coded table (no AJAX). I want to use bootstrap 4 with this. Thanks for the help.

https://datatables.net/examples/api/row_details.html

kthorngren

Thanks that helps. You can use columns.visible to hide the columns in the HTML table that you want to show in the child details. The format(d) function will still get the row data including the hidden columns. Unless you define columns.data the d variable will be an array instead of an object as in the example.

Here is an example with code copied from the Child Details Example:
http://live.datatables.net/jifapite/1/edit

The only changes to the code is the format function.

Kevin

Mr_Patel

Thanks Kevin for your help.

Mr_Patel

Below help on below query.

Mr_Patel

Below is the column 29 value.

I'm not able to see its value in child details. Attachement field is blank.

But I can see the value in normal data table view.

Please help on this.

kthorngren

The screenshots and code snippets are not enough to understand what you are doing. Please post a link to your page or a test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Mr_Patel

I'm calling a API and getting the data in response .. below is the response sample

You can see that file_name is an array inside array so I open a *ng for inside *ng for.
So 28 column index it is like simple to access the key and value of json but file_name is an array inside an Json response so I have to open another loop and I can see the value also in normal data table view, but I can not see the value (i.e d[29]) in parent child view

But with d[29] it is not visible in child view. Please let me know if more explanation is required.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin