adding extra\child row for every table row

adding extra\child row for every table row

123serg123serg Posts: 4Questions: 1Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    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

  • 123serg123serg Posts: 4Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    edited November 2021

    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

  • 123serg123serg Posts: 4Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    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

  • 123serg123serg Posts: 4Questions: 1Answers: 0
    edited December 2021

    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?

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    Answer ✓

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

    Kevin

Sign In or Register to comment.