jquery datatable 즉시 열 숨기기

Question

jquery datatable 숨기기 열 기능이 제대로 작동하도록했습니다.

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

초기에 사용자가 페이지를 처음 들어갈 때 열을 숨기에게

HTML : 다음 코드는 테이블의 두 번째 열을 숨 깁니다 . 열은 클릭 할 때만 표시됩니다.

이 효과를 얻으려면 코드를 어떻게 조정해야합니까?

미리 감사드립니다.

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

});