Jquery DataTable : Table Inside TD, Sub Table, Nested Table

Question

I am using datatable where I need to show a table inside td cell, I have checked drill down example but that requires click on the plus sign, apart that is viewed below the row that contains plus sign. That is not required

I want to create exact nested table like

where td cell have one nested table inline and no need to click on any plus sign. Using datatable is this possible? Any reference please?

Answer 1

Datatable offers basic support for complex headers :

http://datatables.net/release-datatables/examples/basic_init/complex_header.html

Otherwise, you can use callbacks to have your table render something more complicated than single adjacent cells.

http://datatables.net/usage/callbacks

Look for fnDrawCallback and fnRowCallback

The following example will not achieve what you want, but will give you an example of how you can manipulate the html each time datatables modifies it (using fnDrawCallback ) :

http://datatables.net/release-datatables/examples/advanced_init/row_grouping.html

Here is a basic example for using fnRowCallback :

http://datatables.net/release-datatables/examples/advanced_init/row_callback.html

A piece of warning though : if you start fiddling with the table structure, you may end up with surprises with the "filter" and "sort" functionalities.