如何为表数据创建过滤搜索栏

时间:2017-06-09 15:02:51

标签: javascript jquery html

我试图让我的搜索框根据键输入过滤我的表格。但是,通过我的表格设置方式,我不确定如何创建它。

这是我的表

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

0 个答案:

没有答案