CODEWITHSUNDEEP
javascriptjquerydatatables
LuigiMdg
LuigiMdg

Reputation: 37

DataTables - Hide/Show Columns

I'm trying to Show/Hide columns in DataTables using the Switch Buttons (input checkbox) of Bootstrap.. I have created a functionally a link that work to Show/Hide columns, but when i apply the class and the data-column they don't work with checkbox.. The javascript is this:

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

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

                    // Toggle the visibility
                    column.visible(!column.visible());
                });
<a class="toggle-vis" data-column="7">Colina</a>
<input type="checkbox" data-column="0" class="toggle-vis" onchange='OnOff(this, "Carboidrati");' data-label-text="Carboidrati" checked>

Upvotes: 1

Views: 5281

Answers (1)

annoyingmouse
annoyingmouse

Reputation: 5689

Wowser, that was fun to research!!!. The issue is your event handling: in order to "listen" to the switch you need to listen to the switchChange.bootstrapSwitch event so altering you code to listen to that rather than click should fix your problem:

$('.toggle-vis').on('switchChange.bootstrapSwitch', function(event, state) {
    event.preventDefault();
    var column = table.column(~~$(this).attr('data-column'));
    column.visible( ! column.visible() );
});

Working JSFiddle, hope that helps.

Upvotes: 3

Related Questions