Question

有没有方便的方法来显示/隐藏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 );
        } );

以下是此屏幕截图。 enter image description here

现在在网格中，从上午8:15到下午4:15，有15分钟的时间段要求是制作上午/下午的过滤器，以便选择早晨从12：00Pm到4：15Pm隐藏所有街区，并且下午隐藏早晨入场。（上午8:15至中午12:00）

我尝试使用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.隐藏错误的列它超级慢:( 知道如何正确地做到这一点。

Answer 1

是的，你可以这样做：

首先从document.ready函数中取出var oTable，以便在初始化之后全局引用该表。

然后使用：

var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true ); //This creates a toggle effect

//or
oTable.fnSetColumnVis( iCol,false);//hide
oTable.fnSetColumnVis( iCol,true);//show

其中iCol是您要隐藏的列号。

享受

此处有更多信息http://datatables.net/examples/api/show_hide.html

Answer 2

这就是我的表现。哪个工作正常。这里我正在做的是我在列表的onchangeEvent上调用toggleShift（）方法。在我内部进行服务器端调用。并在完成后我调用刷新表方法，它只是重新创建表的实例。

function refreshTable(){
             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 );
            $('#busyMsgDiv').hide();
        }
        function toggleShift(th){
            $('#busyMsgDiv').show();
            var selectedShiftVal = $(th).val() ;
            console.log(selectedShiftVal);
            changeShift1();
        }

show在jquery datatable.net中隐藏多个列

2 个答案: