[Solved] DataTables for Multilevel Table

anjibman

I have table code in JSP as follow where every row have next row as a sub list with list of items. If JavaScript is disable it is displayed in normal fashion else user will click on the top row to display the sub list.

[code]



Heading 1
Heading 2
......................



// Main record row

Data 1
Data 2
...................

// Sub list row



List Item 1
List Item 2
.......................





[/code]

Now when I try to use DataTable to this table it does nothing. I am guessing second sublist row is the problem as it have colspan. How can we use DataTable in such scenario?

Any help will be appreciated.

Thanks in advance.

Anjib

allan

Yup - DataTables does not support colspan / rowspan int he table body at this time. One option would be to put the list information into another column for the main record, and make it hidden. Then use something like this to provide the functionality you want: http://datatables.net/examples/api/row_details.html

Allan

anjibman

I did replace colspan and added blank cols in the row but still DataTable doesn't initialize.

[code]



Heading 1
Heading 2
......................



// Main record row

Data 1
Data 2
...................

// Sub list row



List Item 1
List Item 2
.......................







[/code]

Is there any chance that we can't specify two different kinds of rows in a table. What I have been trying till now with DataTable is I have only one set type of data in every row i.e. no nested rows.

Anjib

allan

As long as all the number of columns match, then that should work okay. I guess it didn't since they don't? Did you get an alert warning, or a JS error?

Allan

anjibman

Actually I am trying to use this DataTable with progressive enhancement technique from filament group.

http://filamentgroup.com/lab/expand_and_collapse_content_accessibly_with_progressive_enhancement_jquery/

So as soon as I added this enhancement feature all the DataTable feature are disabled with no errors. So is this because of some kind of conflict in .js files?

Anjib

anjibman

Solved!!

Just made a sub row as a div element.