Javascript 如何为表数据创建筛选搜索栏
我正试图让我的搜索框根据键输入过滤我的表。然而,以我的表格设置方式,我不确定如何创建它 这是我的桌子Javascript 如何为表数据创建筛选搜索栏,javascript,jquery,html,Javascript,Jquery,Html,我正试图让我的搜索框根据键输入过滤我的表。然而,以我的表格设置方式,我不确定如何创建它 这是我的桌子 for(var i = 0; i<data.length; i++) { //console.log(data[i]); viewTable.row.add([ '<input id="checkBox'+data[i]['
for(var i = 0; i<data.length; i++)
{
//console.log(data[i]);
viewTable.row.add([
'<input id="checkBox'+data[i]['id']+'" type="checkbox" class="td-checkbox">',
'<span id="hall'+data[i]['id']+'">'+data[i]['hall']+'</span>',
'<span id="room'+data[i]['id']+'">'+data[i]['room']+'</span>',
'<span id="name'+data[i]['id']+'">'+data[i]['name']+'</span>',
// '<span id="first'+data[i]['id']+'">+data[i]['first']+'</span>',
//'<span id="last'+data[i]['id']+'">'+data[i]['last']+'</span>',
'<span id="idNum'+data[i]['id']+'">'+data[i]['idNum']+'</span>',
'<span id="email'+data[i]['id']+'">'+data[i]['email']+'</span>',
'<span id="date'+data[i]['id']+'">'+data[i]['date']+'</span>',
//'<span id="time'+data[i]['id']+'">'+data[i]['Time']+'</span>',
0,
'<span id="checkedIn'+data[i]['id']+'">'+numberToIcon(data[i]['checkedIn'])+'</span>',
'<span id="keyOut'+data[i]['id']+'">'+numberToIcon(data[i]['keyOut'])+'</span>'
]);
}
viewTable.draw();
显示一些示例数据怎么样?您是否尝试按列或列内容进行筛选?仅根据用户输入进行筛选。例如,这张桌子上有一群学生。如果用户想要搜索该学生,那么搜索将使用用户输入的字母过滤所有姓名。
<div class="col-md-3" style="float:right;">
<div class="input-group remove-top-margin">
<input id="table-actions-search" type="text" class="form-control" placeholder="Search...">
<span class="input-group-addon table-actions-search-addon">
<i class="icon-search"></i>
</span>
</div>
</div>
$("#table-actions-search").on("keyup", function()
{
var value = $(this).val();
$("#viewTable").each(function(index)
{
if (index != 0)
{
$row = $(this);
var id = $row.find("#eventBody:first").text();
if(id.indexOf(value) != 0)
{
$(this).hide();
}
else
{
$(this).show();
}
}
});
console.log(value);
});