Can not trigger column(s) visibility.

TomHall

Fairly new to all of this so patience and help appreciated.

I have a table working, as well as this code here:

$('#leadTable').on( 'length.dt', function ( e, settings, len ) {setTimeout(bindME,2000);});

$('#leadTable').on( 'page.dt', function () {setTimeout(bindME,1000);});

What I am wanting to do is a create an event that upon clicking an element, hide columns 6,7,8,9 in my table.

I tried the example code on this page - https://datatables.net/examples/api/show_hide.html

But I seem to get nowhere. I have a variable for my table called "tommy" -

`

var tommy = $("#callsTable").dataTable({
    searchPane: {
        columns: [':contains("Market")'], threshold: 0
    },
    "order": [],
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
    "columnDefs": [
        { "visible": false, "targets": 9, "searchable": true, "orderable": true },
        { "visible": false, "targets": 10, "searchable": true, "orderable": true },
        { "visible": false, "targets": 11, "searchable": true, "orderable": true },     
        { "visible": false, "targets": 12, "searchable": false, "orderable": false }

        //{ "visible": false, "targets": 15 },
        // { "visible": true, "targets": 0, "searchable": true }
    ],
    "language": {
        "lengthMenu": "_MENU_ Rows",
        "searchPlaceholder": "Search Client Leads",
        "info": "Rows _START_ to _END_ of _TOTAL_"
    },
    "oLanguage": {
        "sSearch": "<i class='fal fa-search fa-1ax'></i>"
    },
    //colReorder: true,
    dom: "<'#cLeads.row be-datatable-header'lfBi>" +
        "<'row be-datatable-body'<'col-sm-12'tr>>" +
        "<'row be-datatable-footer'<'col-sm-12'p>>",
    buttons: [
        { extend: 'colvis', text: 'Columns' },
        {
            extend: 'collection',
            text: 'Export',
            buttons: [
                'excel',
                'csv',
                'pdf',
                'print'
            ]
        }

    ]
});

`
But this code gets me nowhere

$('a.toggle-vis').on( 'click', function (e) {
e.preventDefault();

    // Get the column API object
    var column = tommy.column( $(this).attr('data-column') );

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

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

TomHall

Colin, My apology, will be more conscientious moving forward.

Here is a link to my page -

https://1stautorepair.com/leads/calls/

What I am attempting to achieve is to have the 4 columns hidden by default, be able to be toggled all together to show / hide. I added a class "update" to the th of each column.

I want my client(s) to be able to toggle these inputs and buttons all together as opposed to having to click each box.

Thank you.

kthorngren

Are you looking for something like this?
https://datatables.net/extensions/buttons/examples/column_visibility/columnGroups.html

Kevin

TomHall

Thank you, definitely something I can work with.