web-dev-qa-db-ja.com

jquery datatables列を非表示

Jquery datatablesプラグインを使用して、テーブル列を非表示（および表示）にする方法はありますか？

fnClearTableとfnAddDataを使用して、テーブルデータをリロードする方法を見つけました。

しかし、私の問題は、テーブルのビューの1つ（非表示モードなど）で特定の列を表示したくないことです。

javascriptjquerydatatables
58
john

次のコマンドで列を非表示にできます。

fnSetColumnVis( 1, false );

最初のパラメーターは列のインデックスで、2番目のパラメーターは可視性です。

経由： http://www.datatables.net/api -functionfnSetColumnVis

55
Damb

誰かがここに再び入れば、これは私のために働いた...

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

列を動的に非表示にする

以前の回答は、レガシー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 Demo があります。

テーブルの初期化時に列を非表示にする

テーブルの初期化時に列を非表示にするには、 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] }
    ]
});
34
devlin carnate

これはデータテーブルの初期化中に定義できます

"aoColumns": [{"bVisible": false},null,null,null]
25
Pankaj Patel

サーバー側の処理を使用し、非表示列を使用してデータベース値を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セルに追加することも忘れないでください

15
DrewT

Jsonのデータを使用し、Datatable v 1.10.19を使用する場合、これを行うことができます。

詳細

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

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

以下を試して、ランタイムを動的に非表示/表示できます

非表示：fnSetColumnVis（1、false、false）;

例： oTable.fnSetColumnVis（item、false、false）;

表示：fnSetColumnVis（1、true、false）;

例： oTable.fnSetColumnVis（item、false、false）;

ここで、oTableはDatatableのオブジェクトです。

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

ターゲット属性は、列の位置を定義します。列の可視性を担当する可視属性。検索機能を担当する検索可能属性。falseに設定すると、その列は検索で機能しません。

1
Susampath

APIを使用すると

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

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

この情報を見てください：

ここにリンクの説明を入力

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

注：現在、受け入れられているソリューションは時代遅れであり、レガシーコードの一部です。 http://legacy.datatables.net/ref このソリューションは、新しいバージョンのDataTables（現在のレガシー）を使用しているユーザーには適切ではない可能性があります。新しいソリューションの場合： https://datatables.net/reference/api/columns().visible()

ボタンを実装できる代替手段： https://datatables.net/extensions/buttons/built-in 列の可視性を切り替えることができるボタンを持つことができる提供されたリンクの下の最後のオプションを見てください。

0
Bhaulik

これがお役に立てば幸いです。一部の列で検索にこのソリューションを使用していますが、フロントエンドに表示したくありません。

$(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
                },
              ]
        });
    });
0
Abo Baker