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