Nested table with data tables

Question

I have the following nested HTML table. I am using the Datatables API to make my tables searchable. One problem I have faced is with the nested tables I'm not sure how to make the nested tables searchable? I have tried adding additional ID tags to the nested tables HTML code and adding that into the dataTables JS code call but that did not work. Any idea how to make the sub-tables searchable?

user_1407478 · Answer

If you by "searchable" mean DataTables inside DataTables you can use the createdRow callback to initialize tables inside a 's columns.

You must have a columns section in order to compensate for the missing in the nested tables (avoiding the TypeError: col is undefined error) :

const columns = [
  { title: '' },
]

Init the nested tables in the createdRow callback:

let table = $('#example').DataTable({
  createdRow: function(row) {
    $(row).find('td table')
      .DataTable({
        columns: columns,
        dom: 'tf'
      })
  }
})

Notice the dom section. Here only showing the table itself and the filter box. You can remove the header with

table.dataTable td table thead {
  display: none;
}

Dont add this CSS if you want sortable columns in the nested tables.

demo using the markup in question -> http://jsfiddle.net/davidkonrad/8pzkr6yn/

Update. If your concern just is to be able to search within the content of the nested tables (e.g the HTML markup scraped away) just define the relevant columns type as 'html' (https://datatables.net/reference/option/columns.type) :

let table = $('#example').DataTable({
  columnDefs: [
    { targets: [2,3,4,5,6,7], type: 'html' },
  ],
  ...
})

Nested table with data tables

1 Answers