Showing/Hiding Columns Dynamically Doesn't affect multiple tables using same selector

andrewlube

Hi,

I am trying show/hide columns dynamically for two tables. The two tables are initialized by the same selector. This was previously working, however now only the first table is affected by the change. How can I use adjust this so both tables are affected by the changes?

JS

//selector
var $table =  $("#${id} table")

//initializing table
 var table = $table.DataTable({
            "processing": true,
            "serverSide": true,
            "sDom": '<"top"i>rtp',
            "order": [[3, "desc"]],
            "ajax": {
                "url": $table.data("populate"),
                "type": "POST",
                "contentType": "application/json",

                "data": function (d) {
                    //var map = $("#alertSearchForm").serializeJSON()


                    return JSON.stringify(d)
                },
                error: function () {
                    alert('Invalid query');
                }
            },
            "columns": [
                {
                    "render": function (data, type, full, meta) {
                        return btnHTML(full);
                    }, orderable: false
                },
                {"data": "id", visible: false},
                {"data": "account", visible: false},
                {"data": "dateCreated"},
                {"data": "lastUpdated", visible: false},
                {"data": "device", visible: true},
                {"data": "namespace"},
                {"data": "source"}

            ]
        })

        table.page.len(50)

//show/hide colum logic
        $('[data-column]').on('click', function (e) {

            console.log($(this).data('column'))

            // Get the column API object
            var column = $table.DataTable().column($(this).data('column'));


            console.log(column)

            // Toggle the visibility
            column.visible(!column.visible());

            return true
        });

html

  <div class='row'>
        <div class="dropdown col-lg-12 marginbottom10" style="">
            <button  class="btn dropdown-toggle" type="button" data-toggle="dropdown">Columns
                <span class="caret"></span></button>
            <ul class="dropdown-menu" style="margin-left: 10px; padding:20px;">
                    <li><input type="checkbox" data-column="1"> Id</li>
                <li><input type="checkbox" data-column="2"> Account</li>
                <li><input type="checkbox" data-column="3" checked> Created</li>
                <li><input type="checkbox" data-column="4"> Updated</li>
                <li><input type="checkbox" data-column="5" checked> Device</li>
                <li><input type="checkbox" data-column="6" checked> Class</li>
                <li><input type="checkbox" data-column="7" checked> Source</li>
          
               ...
            </ul>
        </div>
    </div>

    <div panelType="info" title="Associated Logs">
        <table class="table" data-populate="/controller/method1/${object.id}.json">
            <thead>
            <tr>
               <th></th>
                    <th>Id</th>
                    <th>Account</th>
                    <th>Created</th>
                    <th>Updated</th>
                    <th>Device</th>
                    <th>Class</th>
                    <th>Source</th>
            ...
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div panelType="info" title="Similar Logs">
        <table class="table" data-populate="/controller/method2/${object.id}.json">
            <thead>
                <tr>
                    <th></th>
                    <th>Id</th>
                    <th>Account</th>
                    <th>Created</th>
                    <th>Updated</th>
                    <th>Device</th>
                    <th>Class</th>
                    <th>Source</th>

                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

Thanks in advance,

Andrew

```

jr42.gordon

The variable you are using to store the DataTable, is that used for both tables? I don't think that would work. Instead of using $table.DataTable(), why not have two separate JavaScript vars, or even an array since you are applying same action to all tables within array, that each hold the associated DataTable?