PHP DataTables 隐藏多列答案

【问题标题】：PHP DataTables hide multiple columnsPHP DataTables 隐藏多列
【发布时间】：2014-02-11 09:44:03
【问题描述】：

我正在尝试通过单击 DataTables 来隐藏多个列 (8-25)：

function fnShowHide()
{
    /* Get the DataTables object again - this is not a recreation, just a get of the object */


    var oTable = $('#closing').dataTable();  
    for(var i = 9; i <= 25; i++) {
        var bVis = oTable.fnSettings().aoColumns[i].bVisible;
        oTable.fnSetColumnVis( i, bVis ? false : true );
    }

}

基于标准 DataTables 显示/隐藏列，但不太确定它为什么不起作用。它只隐藏第一列。

【问题讨论】：

标签： php datatables

【解决方案1】：

我不确定它是否与您使用数据表的方式相同，我认为您希望它在点击而不是加载时使用，但这是我使用的有效代码：

注意：

{ "bSortable": false, "bSearchable": false, "bVisible": false, "aTargets": [ 9 ] },

定位第 9 列，在列上没有排序，不可见。

示例代码如下：

   var table_data =  $('#open_datatable').dataTable( {
    "aoColumns": [
        { "sTitle": "", "sClass": "datatable-tiny datatable-center", "bSortable": false  }
        ,{ "sTitle": "ID", "sClass": "datatable-small"  }
        ,{ "sTitle": "Date", "sClass": "datatable-small"  }
        ,{ "sTitle": "Part Number" , "sClass": "datatable-large"}
        ,{ "sTitle": "Customer", "sClass": "datatable-medium" }
        ,{ "sTitle": "Manufacturer", "sClass": "datatable-large" }
        ,{ "sTitle": "Quantity", "sClass": "datatable-medium datatable-center" }
        ,{ "sTitle": "Price", "sClass": "datatable-medium datatable-center" }           
        ,{ "sTitle": "Description", "sClass": "" }          
        ,{ "sTitle": "Urgent", "sClass": "" }           
        ,{ "sTitle": "Search", "sClass": "" }           
        ,{ "sTitle": "", "sClass": "datatable-tiny datatable-center", "bSortable": false  }
        ]
    ,"bJQueryUI": true
    ,"sPaginationType": "full_numbers"
    ,"bProcessing": true
    ,"bServerSide": true
    ,"sAjaxSource": "<?php echo $URL;?>"
    ,"fnServerData": function ( sSource, aoData, fnCallback ) {
        $.ajax( {
            "dataType": 'json', 
            "type": "POST", 
            "url": sSource, 
            "data": aoData, 
            "success": fnCallback
        } );
    }
    ,"bScrollCollapse": true
    ,"fnDrawCallback": function () {
         $('.hidden-img').each(function(){
             $(this).click();
         });

    }
    ,"aoColumnDefs": [
                        {"fnRender": function (o) { 
                            return "<img src='<?= "img/img.png"; ?>' border='0'  width='1px' height='1px' class='hidden-img'> "; 
                        },"bSortable": false, "aTargets": [0]},
                        {"fnRender": function (o) { 
                            return o.aData[10]; 
                        },"bSortable": false, "aTargets": [3]},
                        {"fnRender": function (o) { 
                            return  "$<input type='text' value='"+CurrencyFormatted(o.aData[7], true)+"' class='input-target_price'>";
                        },"aTargets": [7]},
                        {"bSortable": false, "aTargets": [1]},
                        {"bSortable": false, "aTargets": [2]},
                        {"bSortable": false, "aTargets": [5]},
                        {"fnRender": function (o) { 
                            return  "<input type='text' value='"+o.aData[6]+"' class='input-qty'>";
                        }, "bSortable": false, "aTargets": [6]},
                        {"bSortable": false, "aTargets": [7]},
                        { "bSortable": false, "bSearchable": false, "bVisible": false, "aTargets": [ 4 ] },
                        { "bSortable": false, "bSearchable": false, "bVisible": false, "aTargets": [ 8 ] },
                        { "bSortable": false, "bSearchable": false, "bVisible": false, "aTargets": [ 9 ] },
                        { "bSortable": false, "bSearchable": false, "bVisible": false, "aTargets": [ 10 ] },
                        {"fnRender": function (o) { 
                            return  "<img src='<?= "img/img.png"; ?>' border='0' class='save' rel='"+o.aData[11]+"' >";
                        },"aTargets": [11]}
                        ] // end aoColumnDefs

  });//end Datatable

希望这会有所帮助，过去我在调整数据表时遇到了很多麻烦，但是当你掌握了它的窍门时它们会很棒！

祝你好运。

【讨论】：

我认为我的问题与 for 循环有关，而不是与设置有关。谢谢。
好的，接下来看看使用jQuery的.on()方法。 $( "#dataTable tbody tr" ).on( "click", function() { alert( $( this ).text() ); });也许这些项目是动态添加到 DOM 中的，所以你需要 .on() - 祝你好运！参考：api.jquery.com/on

【解决方案2】：

您可以直接在列上使用 .withClass('none') 它将隐藏该列

 vm.dtOpt_SalesEntry = DTOptionsBuilder.newOptions()
                .withOption('responsive', true)
        vm.dtOpt_SalesEntry.withPaginationType('full_numbers');
        vm.dtOpt_SalesEntry.withColumnFilter({
            aoColumns: [{
                    type: 'null'
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bsmart: true
                }, {
                    type: 'select',
                    bRegex: false,
                    bSmart: true,
                    values: vm.dtSalesEntryUnitTypes
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }]
        });

        vm.dtColDefs_SalesEntry = [
            DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
            DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3),
            DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5).withClass('none'),
            DTColumnDefBuilder.newColumnDef(6).withClass('none'), DTColumnDefBuilder.newColumnDef(7).withClass('none'),
            DTColumnDefBuilder.newColumnDef(8).withClass('none'), DTColumnDefBuilder.newColumnDef(9).withClass('none'),
            DTColumnDefBuilder.newColumnDef(10).withClass('none'), DTColumnDefBuilder.newColumnDef(11).withClass('none')
        ];

【讨论】：