jquery 데이터 테이블 숨기기 열

jquery 데이터 테이블 숨기기 열

---

jquery datatables 플러그인을 사용하여 테이블 열을 숨기고 표시하는 방법이 있습니까?

테이블 데이터를 다시로드하는 방법을 알아 냈습니다 : fnClearTable및 fnAddData.

그러나 내 문제는 테이블에 대한 내 뷰 중 하나 (예 : 숨김 모드)에서 특정 열을 표시하고 싶지 않다는 것입니다.

---

다음 명령으로 열을 숨길 수 있습니다.

fnSetColumnVis( 1, false );

첫 번째 매개 변수는 열의 색인이고 두 번째 매개 변수는 가시성입니다.

통해 : http://www.datatables.net/api- 함수 fnSetColumnVis

---

누군가 다시 여기에 오면 이것은 나를 위해 일했습니다 ...

"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }]

---

동적으로 열 숨기기

이전 답변은 레거시 DataTables 구문을 사용하고 있습니다. v 1.10+에서는 column (). visible () 사용할 수 있습니다 .

var dt = $('#example').DataTable();
//hide the first column
dt.column(0).visible(false);

여러 열을 숨기려면 columns (). visible ()을 사용할 수 있습니다.

var dt = $('#example').DataTable();
//hide the second and third columns
dt.columns([1,2]).visible(false);

다음은 Fiddle 데모 입니다.

테이블이 초기화 될 때 열 숨기기

테이블이 초기화 될 때 열을 숨기려면 columns 옵션을 사용할 수 있습니다 .

$('#example').DataTable( {
    'columns' : [
        null,
        //hide the second column
        {'visible' : false },
        null,
        //hide the fourth column
        {'visible' : false }
    ]
});

위의 방법의 경우 null표시되어야하고 다른 열 옵션이 지정되지 않은 열을 지정해야합니다. 또는 columnDefs 를 사용 하여 특정 열을 대상으로 지정할 수 있습니다 .

$('#example').DataTable( {
    'columnDefs' : [
        //hide the second & fourth column
        { 'visible': false, 'targets': [1,3] }
    ]
});

---

데이터 테이블 초기화 중에이를 정의 할 수 있습니다.

"aoColumns": [{"bVisible": false},null,null,null]

---

서버 측 처리를 사용하고 숨겨진 열을 사용하여 데이터베이스 값을 jQuery로 전달하는 모든 사용자에게 "sClass"매개 변수를 제안합니다. css display : none을 사용하여 해당 값을 검색 할 수있는 동안 열을 숨길 수 있습니다.

css :

th.dpass, td.dpass {display: none;}

데이터 테이블 초기화에서 :

"aoColumnDefs": [ { "sClass": "dpass", "aTargets": [ 0 ] } ] // first column in visible columns array gets class "dpass"

// 편집 : 숨겨진 클래스를 thead 셀에도 추가하는 것을 잊지 마십시오.

---

다음과 같이 런타임을 동적으로 숨기거나 표시 할 수 있습니다.

숨기기 : fnSetColumnVis (1, false, false);

예 : oTable.fnSetColumnVis (item, false, false);

표시 : fnSetColumnVis (1, true, false);

예 : oTable.fnSetColumnVis (item, false, false);

여기서 oTable은 Datatable의 객체입니다.

---

API를 사용하면

var table = $('#example').DataTable();

table.column( 0 ).visible( false );

이 정보를보십시오 :

여기에 링크 설명 입력

---

json의 데이터를 사용하고 Datatable v 1.10.19를 사용하는 경우 다음을 수행 할 수 있습니다.

더 많은 정보

$(document).ready(function() {
     $('#example').dataTable( {

        columns= [
          { 
           "data": "name_data",
           "visible": false
           }
        ]
  });
});

---

var example = $('#exampleTable').DataTable({
    "columnDefs": [
        {
            "targets": [0],
            "visible": false,
            "searchable": false
        }
    ]
});

Target 속성은 컬럼의 위치를 ​​정의하고, 컬럼의 가시성을 담당하는 Visible 속성, 검색 기능을 담당하는 Searchable 속성, false로 설정하면 해당 컬럼은 검색과 함께 작동하지 않는다.

---

$(document).ready(function() {
$('#example').DataTable( {
    "columnDefs": [
        {
            "targets": [ 2 ],
            "visible": false,
            "searchable": false
        },
        {
            "targets": [ 3 ],
            "visible": false
        }
    ]
});});

---

참고 : 허용되는 솔루션은 이제 구식이며 레거시 코드의 일부입니다. http://legacy.datatables.net/ref 이 솔루션은 최신 버전의 DataTables (현재 레거시)로 작업하는 사용자에게는 적합하지 않을 수 있습니다. 최신 솔루션의 경우 : https://datatables.net/reference/를 사용할 수 있습니다. api / columns (). visible ()

버튼을 구현할 수있는 대안 : https://datatables.net/extensions/buttons/built-in 열 가시성을 전환 할 수있는 버튼을 사용할 수 있도록 제공된 링크 아래의 마지막 옵션을 살펴보십시오.

---

이것이 당신을 도울 것입니다. 이 솔루션을 일부 열에서 검색에 사용하고 있지만 프런트 엔드에 표시하고 싶지 않습니다.

$(document).ready(function() {
        $('#example').dataTable({
            "scrollY": "500px",
            "scrollCollapse": true,
            "scrollX": false,
            "bPaginate": false,
            "columnDefs": [
                { 
                    "width": "30px", 
                    "targets": 0,
                },
                { 
                    "width": "100px", 
                    "targets": 1,
                },
                { 
                    "width": "100px", 
                    "targets": 2,
                },              
                { 
                    "width": "76px",
                    "targets": 5, 
                },
                { 
                    "width": "80px", 
                    "targets": 6,
                },
                {
                    "targets": [ 7 ],
                    "visible": false,
                    "searchable": true
                },
                {
                    "targets": [ 8 ],
                    "visible": false,
                    "searchable": true
                },
                {
                    "targets": [ 9 ],
                    "visible": false,
                    "searchable": true
                },
              ]
        });
    });

---

내 솔루션 좀 봐

이 HTML이 있습니다 table Head

<thead>
    <tr>
        <th style="width: 20%">@L("Id")</th>
        <th style="width: 20%">@L("IdentityNumber")</th>
        <th style="width: 20%">@L("Name")</th>
        <th style="width: 20%">@L("MobileNumber")</th>
        <th style="width: 20%">@L("RegistrationStatus")</th>
        <th style="width: 20%">@L("RegistrationStatusId")</th>
        <th style="width: 20%; text-align: center;" data-hide="phone">@L("Actions")</th>
    </tr>
</thead>

그리고 내 Ajax request반환 된 뭔가

so I want to hide Id index [0] and RegistrationStatusId index [5]

$(document).ready(function() {
    $('#example').dataTable( {
        "columnDefs": [
            { "aTargets": [0, 5], "sClass": "invisible"},// here is the tricky part
        ]
    });
});

I hope this would help you

참고URL : https://stackoverflow.com/questions/5654633/jquery-datatables-hide-column