When generating multiple Datatables, chosen options disappear when expanding child rows.

Quektis

The code I am running generates multiple Datatables dynamically.

The problem I have is that when a user expands a child row of any Datatable other than the last one that was generated, the chosen options are no longer applied. (the search, pagination etc. functionality gets displayed when expanding a child row)

Only the last table that was generated works as expected when a user expands a child row.

This code is what makes the options disappear:

let selectedTable = $($(this).closest('table')).DataTable();

I have tried selecting the table like this instead:

let selectedTable = vars[tableName];

but that caused selectedTable.row(tr); to no longer return the row.

How can I stop the chosen options for the table being removed when expanding child rows?

Code:

    var vars = {};

    for (var i = 0; i < tables.length; i++) {

        document.getElementById("addToPage").innerHTML += '<table id="table' + i + '" class="display" style="width: 100%"></table><br/>';

        window.vars['table' + i] = $("#table" + i).DataTable({
            data: dataSet,
            ordering: false,
            paging: false,
            searching: false,
            bInfo: false,
            columns: [{
                    render: function(data, type, row) {
                        return "<span title='Add value' class='fa fa-plus plusSymbol'/>";
                    }
                },
                {
                    title: "Column Name"
                },
                {
                    title: "Column Name 2"
                },
                {
                    render: function(data, type, row) {
                        return "<span id='some dynamic id' class='fa fa-window-close fa-lg remove'/>";
                    }
                }
            ]
        });
    }

    //Display child rows
    $(document).on('click', ".plusSymbol", function() {
        $(this).closest('tr').find("span").toggleClass('fa-plus fa-minus');

        let tableId = $(this).closest('table').attr('id');

        tableId = tableId.split("table")[1];

        //let tableName = "table" + tableId;
        //let selectedTable = vars[tableName];

        let selectedTable = $($(this).closest('table')).DataTable();
        let tr = $(this).closest('tr');

        var row = selectedTable.row(tr);

        if (row.child.isShown()) {
            row.child.hide();
        } else {
            row.child(getChildRow(row.data(), tableId)).show();
        }
    });

    function getChildRow(data, tableId) {

        let insertId = data[3].split("remove")[1];

        return '<table cellpadding="5" cellspacing="0"' +
            ' style="padding-left:50px;">' +
            '<tr>' +
            '<td><input pattern="[0-9]+" class="textfield" type="number"></td>' +
            '<td><input pattern="[0-9]+" class="textfield" type="number"></td>' +
            '<td id="' + insertId + '"><button type="button" class=" btn btn-primary">Insert</button></td>' +
            '</tr>' +
            '</table>';
    }

allan

This is the correct approach:

let selectedTable = $($(this).closest('table')).DataTable();

although it can be slightly simplified:

let selectedTable = $(this).closest('table').DataTable();

You can drop all the global variable stuff.

but as to why it isn't working... Can you create a JSFiddle or similar for it showing the issue please?

Thanks,
Allan

Quektis

@alan, I will try and create a JSfiddle that replicates the issue.

I just noticed that if I remove the chosen options altogether from the tables that are being generated, the $(this).closest('table').DataTable(); line duplicates the options.

So I end up with two search bars, two page selectors etc.

So the issue isn't that the options are being removed, but rather that duplicates are getting added.

Quektis

I have found the solution to this issue.

The trick was to add the html for both tables to the innerHtml of "addToPage" first before initialising both tables.

As opposed to adding the Html for table one, then initialising table one, then adding the html for table 2, then initialising table 2.