24

jqueryデータテーブルに表示されないように列を非表示にする必要があります。bVisibleプロパティを使用して列を非表示にすると、DOMから消えます。

列のテーブルセルの表示プロパティをnoneに設定して、値がビューに表示されないようにしたいのですが、非表示にしている列が行を一意に識別し、一意を知る必要があるため、値はDOMに引き続き存在する必要があります行選択のID。これを達成する方法。

サーバー側のページ付けを使用してaaDataプロパティを使用してテーブルにデータを入力しています。

この質問を見てみましたが、これらのオプションはそれをDOMから削除します。 jqueryデータテーブルは列を非表示にします

4

5 に答える 5

46

columnDefsまたはcolumnsclassNameと一緒に使用する必要があります。

hide_columnこのようにcssでクラスを定義します

.hide_column {
    display : none;
}

.hide_columnそのクラスを割り当てるには、次の2つの方法があります。

使用columnDefs（カスタムクラスを最初の列に割り当てる）：

$('#example').DataTable( {
  columnDefs: [
    { targets: [ 0 ],
      className: "hide_column"
    }
  ]
} );

またcolumns

$('#example').DataTable( {
  "columns": [
    { className: "hide_column" },
    null,
    null,
    null,
    null
  ]
} );

ここから取得したコードスニペット

古い答え

追加してみてください

"sClass": "hide_column"

その列を非表示にする必要があります...

于 2013-01-17T07:03:25.163 に答える
11

ダニエルの答えに基づいて構築するには：

css：

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

datatables init：

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

隠しクラスをtheadセルに追加することも忘れないでください。

<thead>
    <th class="hide_me">First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
</thead>

これは、サーバー側の処理を使用していて、データテーブルに表示せずにajaxソースからデータを渡したい場合にも便利な戦略です。表示しなくても、フロントエンドで列の値を取得できます。非表示のデータ値などによるフィルタリングに役立ちます。

例：

// In datatables init file
<script>
    var filteredValues = [];
    $('td.your_filtering_class').each(function(){
        var someVariable = $(this).find('.hide_me').html();
        filteredValues.push(someVariable);
    }
</script>
于 2013-08-30T22:48:02.707 に答える
4

複数の列を非表示にする場合： 

$('#example').dataTable({
  "columnDefs": [{ 
    "targets": [0,1,3], //Comma separated values
    "visible": false,
    "searchable": false }
  ]
});
于 2017-01-31T13:24:23.140 に答える
0

これはあなたへの私の貢献です。

コードが正しいかどうかはわかりませんが、機能します。

私のようなセットアップ列が複数ある場合。

$('#example').dataTable( {
  "columnDefs": [ {
        "targets"  : 'no-sort',
        "orderable": false,
        "order": [],
    }],
    "columnDefs": [ {
        "targets"  : 'hide_column',
        "orderable": false,
        "order": [],
        "visible": false
    }]
} );
于 2017-04-21T12:12:03.800 に答える
-4

メソッドを使用できますhide。

$(element).hide();

要素を表示するには、次のメソッドを使用しますshow。

$(element).show();

n-th child必要な列を取得するには、jqueryのセレクターを使用できます。

于 2013-01-17T05:24:15.273 に答える