Uncaught TypeError: oTable.fnSetColumnVis is not a function

emperordevil.gupta

Hi,
I'm using DataTables - Show / hide columns dynamically with server side and single colom filter, every thing is working perfectly except the show/hide colom, I check your forum but could not able to solve the issue. Can you please help me on this.

This in my JS

var oTable = '';
$(function () {
    oTable = $('#inbox-table').DataTable({
        iDisplayLength: 1,
        aLengthMenu: [[1, 10, 100, 200, 300, 500], [1, 10, 100, 200, 300, 500]],
        processing: true,
        serverSide: true,
        scrollX: true,
        ajax: SITEURL + 'account/account-list',
        columns: [
            {data: 'action', name: 'action', orderable: false, searchable: false},
            {data: 'id', name: 'accounts.id'},
            {data: 'first_name', name: 'accounts.first_name'},
            {data: 'last_name', name: 'accounts.last_name'},
            {data: 'username', name: 'accounts.username'},
            {data: 'disconnected_account', name: 'disconnected_account'},
            {data: 'account_status', name: 'account_status'}
        ],
        initComplete: function () {
            this.api().columns().every(function () {
                var column = this;
                var input = document.createElement("input");
                $(input).appendTo($(column.footer()).empty())
                        .on('keyup change', function () {
                            column.search($(this).val(), false, false, true).draw();
                        });
            });
            $('#selecctall').prop('checked', false);
            isCheck();
        }
    });
});


function updateColumns()
{
    if ($('table#inbox-table').length > 0)
    {
        $('input.toggleColumn').each(function () {
            var col = parseInt($(this).val());
            var show = $(this).is(":checked");

            oTable.fnSetColumnVis(col, show);
        });
    }
}

And this in my HTML code for show hide coloum

<div id="select-col">
    <h6>Select View Option</h6>
    <p>Select All</p>
    <ul>
        <li><input type="checkbox" class="toggleColumn" value="1"/> Action</li>
        <li><input type="checkbox" class="toggleColumn" value="2"/>ID</li>
        <li><input type="checkbox" class="toggleColumn" value="3"/>First Name</li>
        <li><input type="checkbox" class="toggleColumn" value="4"/>Last Name</li>
        <li><input type="checkbox" class="toggleColumn" value="5"/>Username</li>
        <li><input type="checkbox" class="toggleColumn" value="6"/>Disconnected</li>
        <li><input type="checkbox" class="toggleColumn" value="7"/>Status</li>
    </ul>
    <button type="button" onclick="updateColumns()" class="btn btn-primary">Save</button>
</div>

And this is my Table code

<table id="inbox-table" class="table table-striped table-bordered dataTable no-footer" width="100%">

Any help would be really appreciated.
Thanks.

allan

Use column().visible() rather than the legacy fnSetColumnVis method. If you really must use the legacy method then use $().dataTable() as the constructor rather than $().DataTable(). See the top FAQ.

Allan

emperordevil.gupta

Thanks @allan for save my day. One last thing is it possible to hide a textbox form action colom because it will have CURD links so no point of displacing coloum search in that coloum.
Thanks.

allan

One last thing is it possible to hide a textbox form action colom

Probably. I would need a link to your page to see how it is configured at the moment to understand how it might be hidden.

emperordevil.gupta

I will not be able to share that, but i'm using exactly as it is written in your documentation of [Individual column searching (text inputs)]. under initComplete callback.(in the above js) (https://datatables.net/examples/api/multi_filter.html "Individual column searching (text inputs)")

emperordevil.gupta

I did it by myself.

initComplete: function () {
            var ctr = -1;
            this.api().columns().every(function () {
                ctr++;
                var column = this;
                //action
                if (ctr == 1) {
                    ($(column.footer()).empty()).html();
                }
                //for all other append textbox
                else {
                    var input = document.createElement("input");
                    $(input).appendTo($(column.footer()).empty())
                            .on('keyup change', function () {
                                column.search($(this).val(), false, false, true).draw();
                            });
                }
            });

Thanks.