如何启用对数据表中隐藏列的搜索
How to enable search for hidden column in datatable?
我有一个包含Name
列的表,但我不想在表中显示该列,但我需要在其上添加搜索过滤器。
我尝试使用下面,但在这种情况下,列和搜索过滤器的文本框都没有显示。
{
"sName": "Name",
"bVisible": false,
"bSearchable": true
}
当我设置"bVisible": true
时,过滤器和列的文本框都显示出来,搜索也很好。
我使用下面的代码来显示列过滤器。
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
});
});
对于1.9.4版本的DataTables,这可以工作(jsFiddle)
$('#example').dataTable( {
"aoColumnDefs": [
{
"bSearchable": true,
"bVisible": false,
"aTargets": [ 2 ]
},
]
});
可能您缺少aTargets
参数?如果您使用aoColumns
而不是aoColumnDefs
,则数组长度需要等于列(文档)的数量。我不确定sName
参数是否会影响其工作方式…
编辑(回答更详细的问题):
我猜(从试图复制你的问题在这里),这是不工作的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
});
您也可以通过搜索特定列来实现:
$("#table").DataTable().column(0).data().search("example");
因为我们链接了.data()
,这将允许在列0上索引,即使可见性设置为false。
如果您只想搜索可见列,那么省略.data()
.
相关文章:
- JavaScript即时搜索潜水隐藏与褪色效果
- 如何在不隐藏键盘的情况下清除输入搜索?(手机)
- 隐藏Google自定义搜索元素API 2.0的搜索引擎ID
- 根据在“搜索表单”中键入的内容隐藏和显示表行
- 根据搜索内容和Div中的文本值隐藏Div
- 在表的所有 tds 中搜索确切的字符串“已停用”;如果为 true,则隐藏该表的整行
- 隐藏的“纬度”和“lng”字段没有被删除,所以我的脚本仍在从不正确的地理位置中搜索纬度和液化天然气结果
- 如何使用 AJAX 和 XML 从自动完成搜索中将值放入隐藏字段
- 在选择后,在搜索框中隐藏HERE地图的建议列表
- 如何隐藏搜索结果框,我希望它们在点击并激活键控功能时显示
- 使用 jQuery 隐藏搜索函数中不匹配的选项
- 有什么方法可以隐藏搜索栏,直到用户向上滚动..类似于iPhone上的消息应用程序
- 点击显示按钮并在关闭时隐藏搜索字段时出现问题
- jQuery Mobile Search隐藏搜索选项
- 如何使用过滤器反转,所以:隐藏所有包含搜索字符串
- 如何启用对数据表中隐藏列的搜索
- 如何禁用隐藏搜索表行在表排序器插件
- 通过escape按钮隐藏搜索容器
- 如果没有输入,禁用搜索按钮,如果页面第一次加载,隐藏搜索表
- 显示/隐藏搜索Div的角UI