Datatables and Horizontal Child Rows

spacemancw

I was looking at the child rows example at https://datatables.net/examples/api/row_details.html
I was looking for a way to do child rows horizontally.

In the example, the row and data layout is vertical:

Full name:
Airi Satou
Extension number:
5407
Extra info:
And any further details here (images etc)...

I want my table to look like :

SWITCH OS CCODE <- MAIN column headers

abcde-sw01 21-3R1-S2 abc

FP SIZE PERC SERIAL MODEL <- Sub column headers
fpc0 1.3G 45% N1234 EX3400
fpc1 1.3G 41% N1235 EX3400
fpc2 1.3G 43% N1236 EX3400

---

abxyz-sw01 20-3R3-S2 abx

FP SIZE PERC SERIAL MODEL <- Sub column headers
fpc0 1.3G 39% N1237 EX2400
fpc1 1.3G 37% N1238 EX2400

---

ccczz-sw01 19-3R3-S2 ccc

FP SIZE PERC SERIAL MODEL <- Sub column headers
fpc0 1.3G 42% N1239 EX2400
fpc1 1.3G 44% N1241 EX2400
fpc2 1.3G 47% N1242 EX2400
fpc3 1.3G 41% N1243 EX2400
fpc4 1.3G 45% N1244 EX2400
fpc5 1.3G 41% N1245 EX2400

---

So in this example, the main headers are SWITCH and OS and CCODE
The switches have cluster member switches, there may be 2 or 3 or 6, up to 10.
The sub rows shows info for each member, model, serial and storage space info.

It is a bit different to the example mentioned above, where there is always 3 sub rows. Mine really has a fixed amount of sub columns and variious amounts of sub rows.

I get a list of switches, loop through them log in to each with a script and extract the info and create a HTML table.
Currently each of my table rows represent one member switch. So switch "ccczz-sw01" has 6 entries in the table. Depending on how they are sorted or searched, the rows may not stay together. A grouping with one main header and the child rows, would keep them together.

So I guess that just like the main table gets it's data from objects.txt with ajax, maybe the sub rows, (or are the sub columns?), would get their dynamic data a similar way.

I see something like it at https://live.datatables.net/sinotazi/7/edit
but each of the childrow sections looks like its own searchable sub-table. It's a bit too busy.

thanks

kthorngren

Maybe this Ajax loaded detail rows example will help.

Basically the format() function (which can be named anything you like - format not a Datatables requirement. You have full control of how the format() function displays the child detail. The example you linked to does create a Datatable as the child details. You could remove the search input, etc with the dom setting of dom: "t" which would make it less busy.

A grouping with one main header and the child rows, would keep them together.

Take a look at the RowGroup extension to see if the grouping display is more to your liking. You can use orderFixed to force the rowGroup.dataSrc column to always be ordered first allowing the user to order the other columns as desired.

Kevin

spacemancw

This is excellent. Thanks very much.
I checked out

https://datatables.net/extensions/rowgroup/examples/initialisation/simple.html

I just added

     rowGroup: {
            dataSrc: 9
        },

to my existing code.
and loaded the js and css files and it looks great.

I have custom row striping colors in my tables .. it looked messed up here.. so I took it out for this table and let it used the default striping.

It looks great ...
thanks very much.