如何在数据表中启用搜索隐藏列？

Question

I have table which contains a Name column but I don't want to show that column in the table but I need to add a search filter on it.

I tried using the below, but In this case the column and textbox of search filter both are not showing.

{
    "sName": "Name", 
    "bVisible": false, 
    "bSearchable": true
}

When I set "bVisible": true then the text box of filter and column both are showing and also the search works fine.

I am using below code to display column filter.

HTML For Filter:

<div class="col-xs-12 col-sm-6 col-md-4">
     <div class="form-group">
          <label class="col-sm-5 control-label">Customer Name </label>
                 <div class="col-sm-7" id="serName"></div>
      </div><!-- form-group -->
</div>

HTML for Table :

Datatable Javascript After Update:

$(document).ready(function () {
    dTable = $('#exRowTable').dataTable({            
        iDisplayLength: 10,
        sAjaxSource: AjaxSource,
        aoColumns: [               
//            {"sName": "Name", "bVisible": false, "bSearchable": true, "aTargets": [7]},
            {"sName": "Name"}
        ],
        aoColumnDefs: [                            
            {
                "bSearchable": true, 
                "bVisible": false, 
                "aTargets": [ 7 ]
            }
        ],            
        "aaSorting": [[0, 'desc']],
        sPaginationType: "full_numbers"});

    $('#exRowTable').dataTable().columnFilter({
        //sPlaceHolder: "head:after",
        aoColumns: [
            {type: "date-range", sSelector: "#serPickupDate"},
            {type: "text", sSelector: "#serCustId"},
            null,
            null,
            null,
            null,
            null,
            {type: "text", sSelector: "#serName"}
        ],
        bUseColVis: true
    });

});

Answer 1

With version 1.9.4 of DataTables this works ( jsFiddle )

$('#example').dataTable( {
    "aoColumnDefs": [
        { 
            "bSearchable": true, 
            "bVisible": false, 
            "aTargets": [ 2 ]
        },
    ] 
});

Maybe you are missing the aTargets parameter? If you are using aoColumns instead of aoColumnDefs , the array length needs to be equal to the number of columns ( docs ). I'm not sure if the sName parameter affects how this works...

Edit (to answer more detailed question):

I guess (from trying to replicate your problem here ) that it is the columnFilter plugin that is not working. If you have hidden columns you have to set the bUseColVis parameter to true ( docs ). Like so:

$('#exRowTable').dataTable().columnFilter({     
        //sPlaceHolder: "head:after",
        aoColumns: [    
            { type: "date-range", sSelector: "#serPickupDate" },
            { type: "text", sSelector: "#serCustId" },
            null,
            null,
            null,
            null,
            null,
            { type: "text", sSelector: "#serName"},
            { type: "select", sSelector: "#serTimeslotsId", values: TimeSlotsDP},
            { type: "select", sSelector: "#serPickUpPin", values: PincodeDp },
            { type: "select", sSelector: "#serDeliveryPin", values: PincodeDp },
            { type: "date-range", sSelector: "#serRequestDateTime" },
            { type: "select", sSelector: "#serPickedUpStatus", values: ['Yes','No'] },                                
            { type: "select", sSelector: "#serStaffUser", values: StaffUserDp }
        ],
        bUseColVis: true
    });

Answer 2

You can also do this via searching on a specific column:

$("#table").DataTable().column(0).data().search("example");

Because we have chained .data() , this will allow for indexing on column 0 even if visibility is set to false.

If you only want to search on visible columns, then omit the .data() .