adding extra\child row for every table row

123serg

Hello, I want to make table with extra\child rows with information about main rows.
With structure like that:

First name || Last name || Phone number

information about Donald Duck row

Donald || Duck || 123123123

information about Mickey Mouse row

Mickey || Mouse || 987987987

And will it be possible to add buttons later to extra row (delete for example that will affect main row and extra row both)?
Thank you.

kthorngren

Looks like you want the details above the table row data. If so see this thread. The example no longer works because the ajax url is now invalid. But the code should give you an idea of what to do.

And will it be possible to add buttons later to extra row (delete for example that will affect main row and extra row both)?

Yes. You are in control of the extra row details. Specifics of how to do this is based on your solution. Things like are the extra row details part fo the original row data or do they come from somewhere else.

If you need further help then please build a simple test case showing an example of what you have so we can offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

123serg

Hey Kevin! Thank you very much for your answer. I think example you provided include show/hide features for child rows. My structure is more simple, I want table with static(always shown) child rows above main rows without show/hide functions. Maybe you have simple example for it? I'm just newbie, sorry if dumb question

kthorngren

One option is to use rowCallback to open the rows as they are displayed. For example:
http://live.datatables.net/berejure/1/edit

My example is based on this example.

Kevin

123serg

Thank you again for your patience, Kevin. I figured out that I'll need to search rows by value from child row(and show parent and child row both). Maybe there is simple thing, that I don't know about just html styling where one row is shown like two table rows? I think that what I need.

kthorngren

The easiest way to search the child rows is to have the data as part of the original row data and place the child row data in hidden columns. I updated the example to show this.
http://live.datatables.net/berejure/3/edit

I added the Extn column and used columns.visible to hide the column. You can type an extension, like 5407, in the search input and see that searching works.

If you are looking to align the child rows with the columns in the parent row see this thread. The child row display is controlled by you and can be pretty much any valid HTML.

Kevin

123serg

Kevin much much thank you, I think that was what I'm looking for. My last question is can I remove show/hide child row option from user view?

kthorngren

Yes, just remove the first column from HTML and from Datatables, like this:
http://live.datatables.net/berejure/4/edit

Kevin