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

Question

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

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

{
    "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 对于 Table :

数据table 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
    });

});

Answer 1

DataTables 1.9.4 版可以使用 (jsFiddle)

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

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

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

我猜（从试图复制你的问题 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）。像这样：

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

您也可以通过搜索特定列来执行此操作：

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

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

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

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

How to enable search for hidden column in datatable?

javascript

datatable

jquery