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. 間違った列を非表示にします