jQuery数据表立即隐藏列

Question

I got the jQuery datatable hide column feature to work properly. The following code will hide the 2nd column of the table:

HTML

<a href="#" class="btn toggle-vis" data-column="1" id="hideColumn">Show/Hide</a>

JS

$(document).ready(function()
{
  var table = $('#example1').DataTable();

  $('a.toggle-vis').on('click', function(e)
  {
    e.preventDefault();
    var column = table.column($(this).attr('data-column'));
    column.visible( ! column.visible());
  });
}

What I would like to do is initially hide the column when the user first enters the page. The column will only show when clicked.

How do I go about adjusting the code to achieve this effect?

Answer 1

You need to use columnDefs

Try:

var table = $('#example1').DataTable(
{
    "columnDefs": [
        {
            "targets": [ 2 ],
            "visible": false
        }
    ]
} );

EDIT

I'm not sure why that doesn't work. Adding the code in here since in the comment did not display well. Try this instead:

var table = $('#example1').DataTable(); 
table.column(1).visible(false);

Answer 2

Try this

$(function () {    
    // To hide the table header during page load
    $("#example1 tr th:nth-child(2)").hide();

    // To hide the 2nd column during page load    
    $("#example1 tr td:nth-child(2)").each(function () {
        $(this).hide();
    });


    // Hide and show while clicking the link
    $(".toggle-vis").click(function () {
        var col = $(this).data("column");

        // Hide/Show the header
        $("#example1 tr th:nth-child(" + col + ")").is(":visible") ? $("#example1 tr th:nth-child(" + col + ")").hide() : $("#example1 tr th:nth-child(" + col + ")").show();

        // Hide/Show the details
        $("#example1 tr td:nth-child(" + col + ")").each(function () {
            $(this).is(":visible") ? $(this).hide() : $(this).show();
        });
    });

});