How to enable search for hidden column in datatable?

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

});

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

Solution 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().