Struggling with column visibility

pborman

Bound to be me doing something stupid, but I followed the example on https://datatables.net/examples/api/show_hide.html
and although the "toggle-vis" function is getting called, I'm not getting to read the column data. The alert "Request to toggle column" pops up with the correct column number, but the next alert showing current visibility doesn't appear. I've included the whole table definition below in case something there is interfering, serverside processing, rendering, row callback? Can't see why.
debug link at http://debug.datatables.net/ifigop

$(document).ready(function() {
        var table = $('#book_table').dataTable({
            "bAutoWidth": false,
            "order": [[ 2, 'asc' ]],
            "columnDefs":[
                { targets: 'no-sort', orderable: false },
                { targets: [0], 'render': function(data, type, row) {
                    return '<input type="checkbox" name="' + data + '" class="checkbox" />';} },
                { targets: [1], 'render': function(data, type, row) {
                    return '<a href="' + data + '" target="_blank" rel="noreferrer"><img src="' + data + '" alt="Cover" class="bookcover-sm img-responsive"></a>';} },
                { targets: [2], 'render': function(data, type, row) {
                    return '<a href="authorPage?AuthorID=' + row[8] + '">' + data + '</a>';} },
                { targets: [5], 'render': function(data, type, row) {
                    return '<img src="images/' + data + '-stars.png" alt="Rating">';} },
                { targets: [7], 'render': function(data, type, row) {
                    var dtime = row[10];
                    var str = String(dtime).substr(0, 10);
                    if (str === "null"){ str = ""}
                    return str ;} },
                { targets: [8], 'render': function(data, type, row) {
                    var btn = row[11]
                    if ( btn == 'Open' ) {
                        btn = '<a class="button green btn btn-xs btn-warning" href="openBook?bookid=' + row[9] +
                                '" target="_self"><i class="fa fa-book"></i>Open</a>'}
                    else if ( btn == 'Wanted' ) {
                        btn = '<p><a class="a btn btn-xs btn-danger">Wanted</a></p><p><a class="b btn btn-xs btn-success" href="searchForBook?bookid=' + row[9] + '" target="_self"><i class="fa fa-search"></i> Search</a></p>'}
                    else if ( btn == 'Snatched' ) {
                        btn = '<a class="button btn btn-xs btn-info">Snatched</a>'}
                    else if ( btn == 'Have' ) {
                        btn = '<a class="button btn btn-xs btn-info">Have</a>'}
                    else {
                        btn = '<a class="button btn btn-xs btn-default grey">' + row[11] + '</a>'}
                    return btn;} }
                ],
            "oLanguage": {
                "sLengthMenu":"_MENU_ rows per page",
                "sEmptyTable": "No books found",
                "sInfo":"Showing _START_ to _END_ of _TOTAL_ rows",
                "sInfoEmpty":"Showing 0 to 0 of 0 rows",
                "sInfoFiltered":"(filtered from _MAX_ total rows)"},

            "aLengthMenu": [[5, 10, 15, 25, 50, 100, -1], [5, 10, 15, 25, 50, 100, "All"]],
            "iDisplayLength": ${lazylibrarian.CONFIG['DISPLAYLENGTH']},
            "sPaginationType": "full_numbers",
            "aaSorting": [[0, 'asc']],
            "bServerSide": true,
            "sAjaxSource": 'getBooks?source=Books&booklang=${booklang}',
            "bFilter": true,
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                $('td', nRow).eq(5).addClass('text-center');
                $('td', nRow).eq(6).addClass('text-center');
                $('td', nRow).eq(7).addClass('text-center');
                // hide cover,stars,date on small devices
                $('td', nRow).eq(1).addClass('hidden-xs');
                $('td', nRow).eq(5).addClass('hidden-xs');
                $('td', nRow).eq(6).addClass('hidden-xs');
                $('td', nRow).eq(7).addClass('hidden-xs');
                return nRow;
            },
        });

        $('.dataTables_filter input').attr("placeholder", "Search filter");
        $(window).resize(function() {table.fnDraw(false)});

        $('a.toggle-vis').click(function (e) {
            e.preventDefault();
            alert('Request to toggle column ' + $(this).attr('data-column'));
            
            alert( 'Table\'s column visibility set to: '+table.columns().visible().join(', ') );

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

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

kthorngren

Not sure why the second alert window doesn't show. Have you tried console.log instead?

You may want to move that second message after changing the column visibility to see a more accurate message.

Kevin

pborman

Thanks for the reply. I've enabled console log, and the second alert is giving

Uncaught TypeError: table.columns is not a function
I'v googled that, and I was right, it is me doing something stupid.
I need to use var table = $('#book_table').DataTable({
not var table = $('#book_table').dataTable({
(note the capital D)

Thanks for the pointer!

allan

Thanks for posting back. Good to hear you have it working now.

Allan