Expand only one row with details (collapse others)

Expand only one row with details (collapse others)

SkazhikadyadyaSkazhikadyadya Posts: 1Questions: 1Answers: 0

Hi, thank you for great plugin.

I read tonns of pages at forum and can't see solution for standard problem. Whan I expand row I want to collapse other opened rows. How I can do that? My code is:

    $(document).ready(function() {

        var table = $('#opHistory').DataTable( {
            "language": {
                "url": "/datatables/language_russian.json"
            "ajax": "table-operations-history.txt",
            "columns": [

                { "data": "hDate" },
                { "data": "hType" },
                { "data": "hInfo" },
                { "data": "hStatus" }
            "order": [[1, 'asc']]
        } );

        $('#opHistory tbody').on('click', 'tr', function () {
            var tr = $(this).closest('tr');
            var row = table.row( tr );

            if ( row.child.isShown() ) {
                row.child( format(), 'child' ).show();
    } );

Thank you.


  • uheberuheber Posts: 1Questions: 0Answers: 0
    edited November 2016

    Hi together,

    had the same problem which I have resolved as follows:
    1. Store current opened rows in array (global variable 'openRows')
    2. Create a function 'closeOpenedRows()' with parameter 'table' and current selected 'row'

    For usage, the 'else' tree of the event listener needs to be updated
    1. first the new JS function is called to close all other open rows including update the expand/collapse icon
    2. further, the current row be stored within the global variable for later comparison within JS function

                // stores the open rows (detailed view)
                var openRows = new Array();
                 * Close all previously opened rows
                 * @param {object} table which is to be modified
                 * @param {object} selectedRow needs to determine, 
                 * which other rows can be closed
                 * @returns {null}
                function closeOpenedRows(table, selectedRow) {
                    $.each(openRows, function (index, openRow) {
                        // not the selected row!
                        if ($.data(selectedRow) !== $.data(openRow)) {
                            var rowToCollapse = table.row(openRow);
                            // replace icon to expand
                            $(openRow).find('td.details-control').html('<span class="glyphicon glyphicon-plus"></span>');
                            // remove from list
                            var index = $.inArray(selectedRow, openRows);
                            openRows.splice(index, 1);
                    // Add event listener for opening and closing details
                    $('#table_id tbody').on('click', 'td.details-control', function () {
                        var tr = $(this).closest('tr');
                        var row = table.row(tr);
                        if (row.child.isShown()) {
                            // This row is already open - change icon
                            $(this).html('<span class="glyphicon glyphicon-plus"></span>');
                            // close it
                        } else {
                            // close all previously opened rows
                            closeOpenedRows(table, tr);
                            // This row should be opened - change icon
                            $(this).html('<span class="glyphicon glyphicon-minus"></span>');
                            // and open this row                        
                            // store current selection

    Hope it helps someone. Perhaps there are even more elegant solutions. Feedback is welcome.


This discussion has been closed.