Subrows, subdivs, colspan

hoyt

Not sure how to ask this question, so I apologize for the generic subject. I have a table with the first column being the ID. When the user clicks on a row, I want to trigger an ajax command to get more data. I have it all working, but the problem that I'm facing is the new div, which I want to insert right under the current row, is only occupying the space of column 0. I tried colspan=#, but then read that datatables didn't support this. I then forced my div to style="width:1000px;", but when the row is expanded, all of the table is resized (makes sense).

Basically, my question is - is there a better way to handle this? I saw the examples of loading more data by clicking a +, but it was always with static data. I do not want to preload this, it needs to be a user triggered event. I thought about popping a div on top (outside of the dataTable), but I don't like the way that will look. The user will very likely filter the table, then want to "open" multiple rows.

Here's the mocked up example - with the width:1000px applie:

http://live.datatables.net/giqokezi/7

Thanks for any insight/ suggestions!!

tangerine

It sounds like you want child rows:

http://datatables.net/examples/api/row_details.html

with an Ajax call instead of the example's formatDetails() function.

The content of the child row is, in this example, defined by the formatDetails() function, but you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to the server to obtain the extra information to show.

hoyt

Ah, when I saw that documented, for some reason I thought the data was all preloaded, I didn't notice the ajax part. That does look like a better way to do what I'm currently doing.

I will give that a shot later. Thanks!