Need some examples of a responsive nested datatable within a responsive datatable.

Renuka_S

I am looking for some examples of a datatable which is responsive having a nested datatable which is again responsive.

Ashbjorn

Hi Renuka_S,

I am not entirely sure if my example will help you, but it shows my approach on having a child row shown that in itself represents a datatable. The copy/paste is unfiltered so data may not make sense, and do not expect this to work as a copy/paste in your own project.

$(document).ready(function () {
    var dt = $("#list-of-model").DataTable();

    $('#list-of-model tbody').on('click', 'tr td:first-child', function () {
        var tr = $(this).closest('tr');
        var icon = $('i', this);
        var row = dt.row(tr);

        icon.toggleClass('fa-minus-circle');

        if (row.child.isShown()) {
            row.child.hide();
        } else {
            $.post("@Url.Action("getfilters", "filters")", { filterGroupId: tr.attr("data-row-id") }, function (filters) {
                row.child(format(filters)).show();
                // Get the child row, find the table and create a DataTable
                $(row.node()).next().find('table').DataTable({ "dom": "" });
            }, "json");
        }
    });
});

// Creates a child table for the filters
function format(d) {
    var result = '<table class="table table-hover table-striped table-responsive">';
    result += '<thead><th class="col col-2">Filter</th><th>Range</th><th class="col col-2 text-align-center">Operator</th></thead>';
    $.each(d, function (i, item) {
        result += '<tr class="no-padding">' +
                    '<td class="col col-2">' + item.filterType + '</td>' +
                    '<td>' + item.range + '</td>' +
                    '<td class="col col-2 text-align-center text-bold">' + item.operatorType + '</td>' +
                  '</tr>';
    });
    result += '</table>';

    return result;
}

On line 15 I am using a formatter helper function to actually draw the child data as a table.

On line 17 I "grab" that node and turn it into a DataTable, here you could easily add the "responsive": true bit.

The code snippet above produces the following visual example: screenshot

It should clearly reveal that the child "row" is in fact a DataTable.

Hope this helps,