How to prevent sorting from closing opened group row panes.

krutovdl

I have created a table with row grouping. On each group, there is an open or close click event. The open or close event works as designed on click. However, ones the table is sorted, does not matter which column, all the opened panes are closed. The event listening to click <th> is working. Any suggestions? Below is the complete jQuery code with table HTML code:

<div class="container" style="margin-top:10px;">
    <div class="w-75">
        <table id="yourWorkQueues" class="display table table-responsive table-borderless details-control">
            <thead role="row">
                <tr cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
                    <th></th>
                    <th>Queue</th>
                    <th>FLN</th>
                    <th>BA Number</th>
                    <th>Status</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<script>
    var table;
    var openedGroups = new Array();

    function showHideGroup(elm) {
        table.each(function (i, dt) {
            for (row = 0; row < dt.rows.length - 1; row++) {
                $(table[row].rows).each(function (i, obj) {
                    if ($(obj).hasClass(elm.id)) {
                        if ($(obj).css('display') !== 'none') {
                            $(obj).hide();
                            $(elm).attr('src', '/Content/Datatables/images/details_open.png');
                            for (var i = 0; i < openedGroups.length; i++) {
                                if (openedGroups[i].trim() === elm.id.trim()) {
                                    openedGroups.splice(i, 1);
                                    i--;
                                }
                            }
                        }
                        else {
                            $(obj).show();
                            $(elm).attr('src', '/Content/Datatables/images/details_close.png');
                            if (openedGroups.indexOf(elm.id) === -1) {
                                openedGroups.push(elm.id)
                            }
                        }
                    }
                });
            }
        });
    }

    $(document).ready(function () {
        var groupColumn = 0;
        table = $('#yourWorkQueues').dataTable({
            ajax:
            {
                url: "/CoverageInfo/loadDataForYourWorkQueues",
                type: "POST",
                datatype: "json"
            },
            columns: [
                { data: "QueueCd" },
                { data: "QueueCd" },
                { data: "FLN" },
                { data: "BANum" },
                { data: "QueueStatusName" }
            ],
            columnDefs: [
                { visible: false, targets: groupColumn },
                { width: "10%", targets: 1 },
                { width: "25%", targets: 2 },
                { width: "25%", targets: 3 },
                { width: "40%", targets: 4 }
            ],
            //order: [[groupColumn, 'asc']],
            orderFixed: [
                [groupColumn, 'asc'],
                [1, 'desc']
            ],
            paging: true,
            info: true,
            displayLength: 25,
            drawCallback: function (settings) {
                var api = this.api();
                var rows = api.rows({ page: 'current' }).nodes();
                var last = null;

                api.column(groupColumn, { page: 'current' }).data().each(function (group, i) {
                    if (last !== group) {
                        $(rows).eq(i).before(
                            '<tr class="group"><td colspan="4" style="background-color:#eee;"><img id="' + group + '" src="/Content/Datatables/images/details_open.png" onclick="javascript:showHideGroup(this)" /><span class="font-weight-bold">Queue: </span>' + group + '</td></tr>'
                        );
                        
                        last = group;
                    }
                });
            },
            rowCallback: function (row, data, test) {
                $(row).addClass(data.QueueCd);
                $(row).css('display', 'none');
            }
        });

         // th event not working
        $('#yourWorkQueues th').click(function () {
            openedGroups.forEach(function (queue) {
                showHideGroup($('#' + queue));
            });
        });
    });
</script>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin