PHP DataTables隐藏多个列

Question

I'm trying to hide multiple columns (8-25) with a single click in DataTables:

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 );
    }

}

Based this on the standard DataTables show/hide columns but not quite sure why it's not working. It only hides the first column.

Answer 1

I'm not sure if it's the same way that you are working with datatables, i think you want it on click instead of on load, but here's the code I use that works:

Pay attention to:

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

Targeting column #9, no Sorting on the column, not Visible.

Sample code below:

   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

Hope this helps, I had lots of trouble in the past tweaking Datatables, but they are great when you get the hang of it!

Good luck.

Answer 2

You can directly use .withClass('none') on column it will hide the column

 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')
        ];