Question

我获得了jQuery数据表隐藏列功能以正常工作。以下代码将隐藏表的第二列：

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());
  });
}

我想要做的是在用户首次进入页面时隐藏列。该列仅在单击时显示。

如何调整代码以达到此效果？

Answer 1

您需要使用columnDefs

尝试：

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

修改

我不确定为什么这样做不起作用。因此在评论中添加代码不能很好地显示。试试这个：

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

Answer 2

试试这个

$(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();
        });
    });

});

jQuery数据表立即隐藏列

2 个答案: