2

jquery datatable プラグインでテーブル列を表示/非表示にする便利な方法はありますか? ボックスのグリッドを作成するためにhttp://datatables.net/apiを使用しています。固定ヘッダーと固定列を使用します。これは正常に機能しています。

$(document).ready(function() {
             //var selectedElementId = '{!selectedElementId}';
            var oTable = $('#masterGridTable').dataTable( {
                "sScrollY": "255px",
                "sScrollX": "100%",
                "sScrollXInner": "150%",
                "bScrollCollapse": false,
                "bPaginate": false,
                "bFilter": false,
                "bInfo": false,
                "fnInitComplete": function(oSettings, json) {

                }
            } );
            new FixedColumns( oTable );
        } );

以下は、このスクリーンショットです。 ここに画像の説明を入力

現在、グリッドには、午前 8 時 15 分から午後 4 時 15 分までの 15 分のブロックがあります。朝を選択すると午後 12 時から午後 4 時 15 分までのすべてのブロックが非表示になり、午後に午前のエントリが非表示になるように、朝/午後のフィルタを作成する必要があります。(午前8時15分から午後12時)

fnSetColumnVis 関数を使用して、ループ内で非表示の列を表示しようとしました。コード :

function toggleShift(th){
        var selectedShift=$(th).val();
        var oTable = $('#masterGridTable').dataTable();
        if(selectedShift =='Full Day'){
            var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
            oTable.fnDraw();
        }else if(selectedShift =='Morning'){
            $('.dataTables_scrollHeadInner table.dataTable tr:nth-child(2) .PM').each(function(){
                var indexV = $(this).index();
                oTable.fnSetColumnVis( indexV , false );
            });
        }else if(selectedShift =='Afternoon'){
            $('.dataTables_scrollHeadInner table.dataTable tr:nth-child(2) .AM').each(function(){
                var indexV = $(this).index();
                oTable.fnSetColumnVis( indexV , false );
            });
        }

この関数は、右上のドロップダウンの onchange イベントを呼び出します (画像の今日のテキストの横) これは機能します (適切ではありません) 1. 間違った列を非表示にします

4

2 に答える 2