如何启用对数据表中隐藏列的搜索？答案

【问题标题】：How to enable search for hidden column in datatable?如何启用对数据表中隐藏列的搜索？
【发布时间】：2016-01-19 01:54:52
【问题描述】：

我有一个包含Name 列的表，但我不想在表中显示该列，但我需要在其上添加搜索过滤器。

我尝试使用以下内容，但在这种情况下，搜索过滤器的列和文本框都没有显示。

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

当我设置"bVisible": true 时，过滤器和列的文本框都会显示，并且搜索工作正常。

我正在使用下面的代码来显示列过滤器。

过滤器的HTML：

<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：

更新后的数据表 Javascript：

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

});

【问题讨论】：

在更新版本的数据表中可以使用{ 'visible': false }datatables.net/reference/option/columns.visible

标签： javascript jquery datatable

【解决方案1】：

您也可以通过搜索特定列来做到这一点：

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

因为我们已经链接了.data()，所以即使可见性设置为 false，这也将允许在第 0 列上建立索引。

如果您只想搜索可见列，请省略.data()。

【讨论】：

【解决方案2】：

使用 1.9.4 版的 DataTables 可以正常工作 (jsFiddle)

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

也许您缺少aTargets 参数？如果您使用aoColumns 而不是aoColumnDefs，则数组长度需要等于列数（docs）。我不确定sName 参数是否会影响其工作方式...

编辑（回答更详细的问题）：

我猜（试图复制您的问题here）是 columnFilter 插件不起作用。如果您有隐藏列，则必须将 bUseColVis 参数设置为 true (docs)。像这样：

$('#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
    });

【讨论】：