Toggling visibility? (1.9.4)

DigitalFusion

Hello,

After spending most of my morning going crazy trying to set bVisibility to false, only to find that the culprit the entire time was bSaveState breaking the ability to set bVisibile, I've moved onto trying to get toggling the visibility working. I think my brain is a bit fried from the frustrations of this morning.

Im sorry, but I dont have a link because this is on my localbox. Datatables live doesnt seem to have 1.9 as an option, so I cant use that, and JS fiddle isnt recognizing the external library as an option because its in an ASP file.

Here is my table JS:

   $(document).ready(function () {
        $("#table-users").dataTable({
            "sDom": "<'row'<'col-sm-6'<'pull-left'T><'pull-left'l>><'col-sm-6'f>><'table-responsive'rt><'row'<'col-sm-6'<'pull-left'i>><'col-sm-6'<'pull-right'p>>",
            "aaSorting": [[0, "asc"]], //default sort column
            "aoColumnDefs": [
                { "bVisible": false, "aTargets": [6,7, 8, 9, 10] },
                { "bSortable": false, "aTargets": [11] },
                { "bSearchable": false, "aTargets": [11] }
            ],
            "bProcessing": true,
            "bSortClasses": false,
            //"bStateSave": true,
            "iDisplayLength": 15,
            "aLengthMenu": [[5, 10, 15, 20, 50, -1], [5, 10, 15, 20, 50, "All"]], "bProcessing": true,
            "oLanguage": { "sSearch": "<i class='ico-search'></i>&nbsp;" },
            "oTableTools": {
                "sSwfPath": "<%=strSWF_Path%>",
                "aButtons": [
                                {
                                    "sToolTip": "test",
                                    "sTitle": "test",
                                    "bFooter": true,
                                    "bHeader": false,
                                    "sExtends": "xls",
                                    "sButtonText": "XLS",
                                    "sFileName": "test.xls",
                                    "mColumns": [0, 1, 2, 3]
                                },
                                {
                                    "bFooter": true,
                                    "sExtends": "csv",
                                    "sButtonText": "CSV",
                                    "sFileName": "test.csv",
                                    "mColumns": [0, 1, 2, 3]
                                },
                                {
                                    "bFooter": true,
                                    "sTitle": "test",
                                    "sExtends": "pdf",
                                    "sButtonText": "PDF",
                                    "sFileName": "test.pdf",
                                    "mColumns": [0, 1, 2, 3]
                                }
                ]
            }
        });
        $('.dataTables_filter input').attr("placeholder", "search by: unit, name, email");
    });

The data table is working fine. However, I want the user to be able to toggle the visibility of any of the columns. I added the following links:

Toggle columns:
<a class="toggle-vis cursorPointer" data-column="0">0</a> -
<a class="toggle-vis cursorPointer" data-column="1">1</a> -
<a class="toggle-vis cursorPointer" data-column="2">2</a> -
<a class="toggle-vis cursorPointer" data-column="3">3</a> -
<a class="toggle-vis cursorPointer" data-column="4">4</a> -
<a class="toggle-vis cursorPointer" data-column="5">5</a> -
<a class="toggle-vis cursorPointer" data-column="4">6</a> -
<a class="toggle-vis cursorPointer" data-column="4">7</a> -
<a class="toggle-vis cursorPointer" data-column="4">8</a> -
<a class="toggle-vis cursorPointer" data-column="4">9</a> -
<a class="toggle-vis cursorPointer" data-column="4">10</a>

And the following script with alerts thrown in to see where its tripping up:

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

            // Get the table
            var table = $('#table-users').dataTable();
            alert('1');

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

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

I can get alert "1" to fire, bit nothing after that. Im positive im missing something silly here.

DigitalFusion

Got it. Told ya the brain was fried!

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

            // table
            var table = $('#table-users').dataTable();

            // column 
            var ColNum = $(this).attr('data-column');

            // Define 
            var bVis = table.fnSettings().aoColumns[ColNum].bVisible;

            // Toggle
            table.fnSetColumnVis(ColNum, bVis ? false : true);

        });
    });

allan

Good to hear you got it fixed. The code you had originally was using the new API rather than the legacy one as you have done to fix it.

Allan