jquery 데이터 테이블 열 숨기기

jquery 데이터 테이블 열 숨기기

jquery datables 플러그인으로 테이블 열을 숨기고 표시하는 방법이 있습니까?

테이블 데이터를 다시 로드하는 방법을 찾았습니다.fnClearTable그리고.fnAddData.

하지만 제 문제는 테이블에 대한 제 견해 중 하나(숨김 모드 등)에서 특정 열을 표시하고 싶지 않다는 것입니다.

열을 동적으로 숨기기

앞의 답변은 기존 DataTables 구문을 사용하는 것입니다.v1.10+에서는 열(.visible()을 사용할 수 있습니다.

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

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

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

여기 Fiddle 데모가 있습니다.

테이블 초기화 시 열 숨기기

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

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

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

fnSetColumnVis( 1, false );

여기서 첫 번째 매개변수는 열 인덱스이고 두 번째 매개변수는 가시성입니다.

경유지: http://www.datatables.net/api - fnSetColumnVis 함수

누군가가 여기 다시 온다면 나한테는 효과가 있었어요

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

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

"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"

//EDIT: 숨겨진 클래스도 광고 셀에 추가해야 합니다.

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 속성은 열의 위치를 정의합니다.열의 가시성을 담당하는 가시적 속성입니다.검색설비를 담당하는 검색가능 속성입니다.false로 설정된 경우 열은 검색과 함께 작동하지 않습니다.

런타임을 동적으로 숨기거나 보여주기 위해 아래와 같이 시도할 수 있습니다.

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

예: oTable.fnSetColumnVis(항목, false, false);

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

예: oTable.fnSetColumnVis(항목, false, false);

여기서 oTable은 Datable의 개체입니다.

참고: 허용된 솔루션은 이제 구식이며 레거시 코드의 일부입니다.http://legacy.datatables.net/ref 이 솔루션은 최신 버전의 데이터 테이블(현재 데이터 테이블)을 사용하는 사용자에게는 적합하지 않을 수 있습니다. 최신 솔루션은 다음과 같습니다. 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
                },
              ]
        });
    });

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

제 해결책을 보세요.

는 이 는 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 식으로 답신을 했습니다. 습니다.

그래서 Id 인덱스 [0] 및 RegistrationStatusId 인덱스 [5]를 숨기고 싶습니다.

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

이것이 당신에게 도움이 되기를 바랍니다.

언급URL : https://stackoverflow.com/questions/5654633/jquery-datatables-hide-column