Table where some content spans multiple columns
Table where some content spans multiple columns
ægteEmil
Posts: 20Questions: 3Answers: 0
in DataTables
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:
+---+---+---+
| | | |
+---+---+---+
| |
+-----------+
This question has accepted answers - jump to:
Answers
The HTML requirements doc states that
colspanandrowspanare not supported in thetbody. I assume this is what you are trying to do. Maybe the RowGroup extension will do what you want.Kevin
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?
I re-read your description. Instead of RowGroup it sounds like you want something like the child row details example.
Kevin
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?
The child row details example is only using one dataset. Take another look.
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
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.
You don't need to use the click event to open the child rows. You can use
rowCallbackto 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 usesrow()to get the row passed in from therowparameter. It uses thedataparameter 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 usesrow().child().show()to show the child row.Kevin
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!
Sorry I didn't see your second post above with the table.
Datatables doesn't support
colspanin thetbody. Can you combine these two rows into one, like this?Without the
colspan. If so then you can usecolumns.visibleto hide that column. Your Datatable will be using arrays instead of object data sturcture so in the format function use array notation liked[4]to access the column data.Kevin
Here is an example:
http://live.datatables.net/navoyati/1/edit
Note I also added a
thto thetheadfor the long text column. Also since this uses a hidden column the text is searchable.Kevin
Wow! Exactly what I needed, thank you so much.
Perhaps obvious, but am I correct in my understanding that the
rowCallbackfunction is invoked on each<tr>in the table?With the
targets: -1in thecolumnDefs, is the long-text<td>being hidden and thus counted as a child element in therowCallbackfunction?The
rowCallbackruns each time the row (tr) is written to the page. Thecolumn.targetsof-1points to the last column. Could have usedtargets: 4also.rowCallbackdoes 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 itsd[4]which happens to be hidden.HTH
Kevin
Brilliant, I get it now. Thanks again!
Well, what do you know, I have another issue that I'm confused about. The
<tr>rendered from theformat()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 the
format()function, it is only applied to the nested<td>.The output looks like this (with my test class):
With my tiny change:
http://live.datatables.net/navoyati/3/edit
The child detail row is a
trthat Datatables adds along with thetdwith a colspan across all columns.. The format function in the example is also adding atr. Maybe you just want adivor some other element:http://live.datatables.net/navoyati/4/edit
Kevin
Is there a way to change/add classes to the
tdthat Datatables adds? Specifically, I want to change the padding of it.See if this thread helps.
Kevin