PHP DataTables隱藏多個列

Question

我試圖通過單擊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 show / hide列，但是不太確定為什么它不起作用。 它僅隱藏第一列。

Answer 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

希望這會有所幫助，我在過去調整Datatables時遇到了很多麻煩，但是當您掌握它時，它們很棒！

祝好運。

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