How to create jQuery Datatable Drill-down rows?

Question

In my MVC project, I am trying to use a single Datatable and collapse the rows for detail data as shown on Creating an expandable master-details table (jQuery DataTables and ASP.NET MVC integration - Part IV). On the other hand, I am looking for a similar examples of jQuery Datatable master-detail relations for ASP.NET MVC, but unfortunately I have not another suitable sample or tutorial from at least 50 pages on the web. Is there a similar examples like that? Thanks in advance...

Answer 1

I did similar work for one of the projects. I had one collapse/expand button that works for the whole table and each row has its one collapse expand icon. here is my code.

Note: I have renamed the variables to hide my data so the code might not work as it is.

function populateInstanceTable(tableData){
    // Use to determine whether the child rows for all parents should be shown or hidden.
    var SHOW_ALL_CHILDREN_FLAG = false;
    var CHILD_DISPLAY_STATE_OVERRIDE = false;
    var TABLE = $('#table_instance').DataTable(
                                                {
                                                    'aaData': tableData,
                                                    'bProcessing': true,
                                                    'aoColumns': [
                                                                    {
                                                                        'sTitle': 'Column1',
                                                                        'mData' : 'col1Data'
                                                                    }, 
                                                                    {
                                                                        'sTitle': 'Column2',
                                                                        'mData' : 'col2Data'
                                                                    },
                                                                    {
                                                                        'sTitle': 'Column3',
                                                                        'mData': 'col3Data'
                                                                    },
                                                                    {
                                                                        'class': 'show-details',
                                                                        'orderable': false,
                                                                        'data': null,
                                                                        'defaultContent': ''
                                                                    }
                                                                ]
                                                }
                                            );
    function getDetailContent(details) {
        return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
               '<tr>' +
                    '<td style="border:0px;">More Details:</td>'+
                    '<td style="text-align:left;max-width:100%;border:0px;">' + details + '</td>' +
               '</tr>' +
               '</table>';
    }

    //This function shows and hides multiple child rows with details, for following conditions
    // when user clicks '+' or '-' icon
    // When user uses search
    // when user changes the number of entries per page
    // when user navigates through the table
    // @remark: With exception of expand all and collapse all events, the display state is retained for child rows 
    //that have been previously visited. Visited implies the parent row's show or hide details icon was individually clicked.
    function collapseOrExpandRows() {
        var numberOfVisibleParentRows = $('#table_instance tbody tr td.show-details').length;
        for (var i = 0; i < numberOfVisibleParentRows; i++) {            
        var parentJQRow = $('.show-details').parents('tr').eq(i);
            var parentDTRow = TABLE.row(parentJQRow);
            // visited_child helps us retain the state of the child row display while 
            // searching, navigating, sorting or changing number of entries
            // We always change the state of child if collapse all(- icon) or expand all(+ icon) is clicked.
            if (parentJQRow.hasClass('visited_child') === false  || CHILD_DISPLAY_STATE_OVERRIDE === true) {
                if (SHOW_ALL_CHILDREN_FLAG === true) {

                    // We are populating a child row with a table because the parent datatable does not support colspan property.
                    parentDTRow.child(getDetailContent(parentDTRow.data().details)).show();
                    parentJQRow.addClass('shown');
                } 
                else {
                    parentDTRow.child.hide();
                    parentJQRow.removeClass('shown');
                }
            }
        }
    }

    //To display details, this event handler shows or hides a single child row 
    //when the show-details cell is clicked on the parent row
    $('#table_instance tbody').on('click', 'td.show-details', function() {
        var parentJQRow = $(this).parents('tr'); 
        var parentDTRow = TABLE.row(parentJQRow);

        //visited_child helps us retain the state of the child row display while 
        // searching, navigating, sorting or changing number of entries
        parentJQRow.addClass('visited_child');

        if (parentDTRow.child.isShown()) {
            parentDTRow.child.hide();
            parentJQRow.removeClass('shown');
        } 
        else {
            parentDTRow.child(getDetailContent(parentDTRow.data().details)).show();
            parentJQRow.addClass('shown');
        }

        CHILD_DISPLAY_STATE_OVERRIDE = false;
    });

    // This event handler retains the state of the child row display 
    // when navigating through the table.
    $('.dataTables_paginate').on('click', function() {
        collapseOrExpandRows();
    });

    // This event handler hides child row for all visible parents.
    $('.collapseall').on('click', function() {
        CHILD_DISPLAY_STATE_OVERRIDE = true;
        SHOW_ALL_CHILDREN_FLAG = false;
        collapseOrExpandRows();
    });

    // This event handler shows child row of all visible parents. 
    $('.expandall').on('click', function() {
        CHILD_DISPLAY_STATE_OVERRIDE = true;
        SHOW_ALL_CHILDREN_FLAG = true;
        collapseOrExpandRows();
    });

    // This event handler retains the state of the child row display 
    // when the user selects the number of entries to display in the table
    $('div.dataTables_length select').on('change', function() {
        collapseOrExpandRows();
    });

    // This event handler retains the state of the child row display 
    // when the user clicks on header to sort
    $('thead > tr > th', '#table_instance').click(function() {
        if ($(this).hasClass('show-details') === false) {
            collapseOrExpandRows();
        }
    });

    // This event handler retains the state of the child row display 
    // when the user searches
    $('div.dataTables_filter input').keyup(function() {
        collapseOrExpandRows();
    });
}

I have attached the screenshot for your help.

Answer 2

There is a good example on Datatables Blog having also a wonderful sliding property. There is unfortunately not so much example on the web regarding to this issue, but I hope this example is useful for you.