2

有没有方便的方法来显示/隐藏 jquery 数据表插件中的表列？我正在使用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:00 到下午 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. 隐藏错误的列 2. 它超级慢 :( 知道如何正确地做到这一点。

4

2 回答 2

2

是的，你可以这样做：

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

然后使用：

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

于 2013-08-30T11:31:07.497 回答
1

我就是这样做的。哪个工作正常。这里我正在做的是我在列表的 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();
        }
于 2013-09-02T16:45:27.717 回答