Table where some content spans multiple columns

ægteEmil

Hi.
I have data where I want to display data with some basic information represented by my table headers (name, club, sport, date). Each row of information includes these four pieces of information along with a longer text. I'd like to have the text span across the entire table, so the content can be read easily. However, I'm having trouble wrapping my head around how to make it work. Sorting should only be concerned about the four table headers.

Essentially each row looks like this:

+---+---+---+
|   |   |   |
+---+---+---+
|           |
+-----------+

kthorngren

The HTML requirements doc states that colspan and rowspan are not supported in the tbody. I assume this is what you are trying to do. Maybe the RowGroup extension will do what you want.

Kevin

ægteEmil

I looked at it, but I can't seem to wrap my head around how to apply it in this situation. Do you have any experience with it?

kthorngren

I re-read your description. Instead of RowGroup it sounds like you want something like the child row details example.

Kevin

ægteEmil

I think you might be right, but it seems to me that data here is loaded separately and can then be appended - do you happen to know of an example where it is done based on one dataset?

tangerine

The child row details example is only using one dataset. Take another look.

ægteEmil

Ah, I should phrase myself properly. I'm not looking to have to push a button but always have the child elements be displayed. The elements seem to be injected in the existing html on click and then removed when clicked once again. I just can't figure out how to display it constantly, while allowing sorting to work on the headers.

Essentially, nothing extra should be dynamically added, but just extra static content that spans the columns

ægteEmil

Or, perhaps easier to help me with, how do I make this table sortable, ignoring all sorts on the extra row with class "longtext", while making sure it sticks together with its parent.

<table>
    <thead>
        <tr>
            <th>Club</th>
            <th>Sport</th>
            <th>Date</th>
            <th>&nbsp;</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Some club</td>
            <td>Some sport</td>
            <td>Some date</td>
            <td>Some buttons</td>
        </tr>
        <tr class="longtext">
            <td colspan="4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </td>
        </tr>

        <tr>
            <td>Some club</td>
            <td>Some sport</td>
            <td>Some date</td>
            <td>Some buttons</td>
        </tr>
        <tr class="longtext">
            <td colspan="4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </td>
        </tr>
    </tbody>
</table>

kthorngren

You don't need to use the click event to open the child rows. You can use rowCallback to open all the child rows on the page being displayed. I took the above example and modified it a bit here to demonstrate:
http://live.datatables.net/foqodoja/1/edit

In most callbacks you can use this.api() to get an instance of the API. It uses row() to get the row passed in from the row parameter. It uses the data parameter to pass the data to the format function. You will change the format function to display the row in the format you want. And it uses row().child().show() to show the child row.

Kevin

ægteEmil

The example you provided is exactly what I'm looking for, but when I'm initializing my table, I'm simply invoking $('#table').DataTable() on it, with all the existing data. Is there an easy modification to the table I posted above, to achieve the same result as you provided?
Thanks a bunch for your help so far!

kthorngren

Sorry I didn't see your second post above with the table.

        <tr>
            <td>Some club</td>
            <td>Some sport</td>
            <td>Some date</td>
            <td>Some buttons</td>
        </tr>
        <tr class="longtext">
            <td colspan="4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </td>
        </tr>

Datatables doesn't support colspan in the tbody. Can you combine these two rows into one, like this?

        <tr>
            <td>Some club</td>
            <td>Some sport</td>
            <td>Some date</td>
            <td>Some buttons</td>
            <td>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </td>
        </tr>

Without the colspan. If so then you can use columns.visible to hide that column. Your Datatable will be using arrays instead of object data sturcture so in the format function use array notation like d[4] to access the column data.

Kevin

kthorngren

Here is an example:
http://live.datatables.net/navoyati/1/edit

Note I also added a th to the thead for the long text column. Also since this uses a hidden column the text is searchable.

Kevin

ægteEmil

Wow! Exactly what I needed, thank you so much.

Perhaps obvious, but am I correct in my understanding that the rowCallback function is invoked on each <tr> in the table?
With the targets: -1 in the columnDefs, is the long-text <td> being hidden and thus counted as a child element in the rowCallback function?

kthorngren

The rowCallback runs each time the row (tr) is written to the page. The column.targets of -1 points to the last column. Could have used targets: 4 also.

thus counted as a child element in the rowCallback() function?

rowCallback does not know anything about the child element. The API calls in the rowCallback show the child rows. The column doesn't need to be hidden to show in the child row. The .child( format(data) ).show(); passes the data for the full row to the format function. In the format function you decide which data elements to display. In this case its d[4] which happens to be hidden.

HTH

Kevin

ægteEmil

Brilliant, I get it now. Thanks again!

ægteEmil

Well, what do you know, I have another issue that I'm confused about. The <tr> rendered from the format() function in your example renders a wrapping <tr> and <td> around it, and I can't seem to understand where it comes from.

Addtionally, if I add a random class to the output of theformat() function, it is only applied to the nested <td>.

The output looks like this (with my test class):

<tr>
 <td colspan="4">
  <tr>
   <td class="test" colspan="4">
   Lorem ...
   </td>
  </tr>
 </td>
</tr>

With my tiny change:
http://live.datatables.net/navoyati/3/edit

kthorngren

The child detail row is a tr that Datatables adds along with the td with a colspan across all columns.. The format function in the example is also adding a tr. Maybe you just want a div or some other element:
http://live.datatables.net/navoyati/4/edit

Kevin

ægteEmil

Is there a way to change/add classes to the td that Datatables adds? Specifically, I want to change the padding of it.

kthorngren

See if this thread helps.

Kevin