jquery datatableすぐに列を非表示

Question

jquery datatable hide column機能が正しく動作するようになった。

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

ユーザーが最初のページに入ったときに私は何をしたいのは、最初に列を非表示にされています。次のコードは、テーブルの2番目の列を非表示にします。列はクリックされたときにのみ表示されます。

この効果を得るためにコードを調整するにはどうすればよいですか？

ありがとうございます。

Answer 1

あなたがcolumnDefs

を使用する必要が

試してみてください。私はそれが動作しない理由はわからない

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

EDIT。コメントの中にここにコードを追加するとうまく表示されませんでした。 代わりにこれを試してみてください：

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

});