PHP DataTables 隐藏多列

Posted 2023-05-08

【中文标题】PHP DataTables 隐藏多列

【英文标题】：PHP DataTables hide multiple columns

【发布时间】：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 显示/隐藏列，但不太确定它为什么不起作用。它只隐藏第一列。

【参考方案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')
        ];