Child row vs colvis

nwicki · February 2020

I am using the 'colvis' button in my setup in combination with child rows.

I got the ideas on how to do that from https://datatables.net/examples/api/row_details.html and https://datatables.net/extensions/buttons/built-in.

I built a showcase for my problem on https://jsfiddle.net/L7xpkz3u/2/.

If you click on the "closed" cell, a child row should open up. By clicking on it again it should disappear. Now, if you were to use the "Column Visibility" button on top of the table, and click on a name of a column the column disappears where the content resides beside the table which does not happen if the child row was not activated during the session.

Does anyone know how to solve this problem?

nwicki · February 2020

A little update to my previous problem. It still persists, but a second problem occurs if you remove columns with the "colvis" button from the beginning of the table after having invoked the child rows.

So, if you activate the first child row, then remove the column "name" and immediately try to add it, we get the following exception:
Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

I assume this is related to the previous problem stated and hope I can find a solution which solves both.

kthorngren · February 2020

Seems the problem is the result of this statement:
tr[0].innerHTML = tr[0].innerHTML.replace('open', 'closed');

Commenting it out seems to resolve the issue. I updated the test case to use cell().data() to update the column with open/closed. Note I also changed the default column being sorted so the update doesn't affect sorting.

Kevin

nwicki · February 2020

Hmm, I appreciate your effort. But I do not know what test case you are talking about. I cannot see any difference in https://jsfiddle.net/L7xpkz3u/2/ . Also, when using cell().data() I get the data inside the child row and no possibility to update the contents of the header row. Am I missing anything?

nwicki · February 2020

Oh, I am sorry. I again tried it with your approach and it seems I messed it up before. It works now. Thank you very much.

nwicki · February 2020

I now finished implementing it. Since I couldn't post the original code, I made some mistakes in the showcase which is why the answer was correct for the showcase, but not for the actual case I am using.
Nonetheless, the answer helped me find the bug and how to solve it which is why I am posting an adjusted showcase below which more accurately resembles the actual code I am working on and hopefully can help someone.

https://jsfiddle.net/5o7twgec/3/

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
    <style>
        .closed-class::before {
            content: "closed";
        }
        .open-class::before {
            content: "open";
        }
    </style>
    <script>
        $(document).ready(function () {
            var table = $('#example').DataTable({
                dom: 'Bfrtip',
                buttons: ['colvis']
            });

            $('#example tbody').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = table.row(tr);
                if (row.child.isShown()) {
                    row.child.hide();
                    var iconNode = row.node().childNodes[1];
                    $(iconNode).removeClass('open-class');
                    $(iconNode).addClass('closed-class');
                }
                else {
                    row.child(format(row)).show();
                    var iconNode = row.node().childNodes[1];
                    $(iconNode).removeClass('closed-class');
                    $(iconNode).addClass('open-class');
                }
            });
        });

        function format(row) {
            var div = $('<div />')
                .html('Example text.');
            return div;
        }
    </script>
</head>

<body>
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <td class="details-control"></td>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="details-control closed-class"></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td class="details-control closed-class"></td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td class="details-control closed-class"></td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Child row vs colvis

Child row vs colvis

Answers

Howdy, Stranger!

Categories

DataTables

Child row vs colvis

Child row vs colvis

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables