Toggling visibility? (1.9.4)

Toggling visibility? (1.9.4)

DigitalFusionDigitalFusion Posts: 10Questions: 5Answers: 1
edited July 2015 in Free community support

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.

This question has an accepted answers - jump to answer

Answers

  • DigitalFusionDigitalFusion Posts: 10Questions: 5Answers: 1
    Answer ✓

    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);
    
            });
        });
    
  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin

    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

This discussion has been closed.