Search and Filter Dynamic HTML table as you type in TextBox using jQuery in ASP.Net

Hi leo08,

Here i have created sample that full fill your requirement.

HTML

Search:&nbsp;<input type="text" id="search" placeholder="Type to search">
<asp:Literal ID="litTable" runat="server" />
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            var $rows = $('#tbluploaded tr[class!="header"]');
            $('#search').keyup(function () {
                var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

                $rows.show().filter(function () {
                    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
                    return ! ~text.indexOf(val);
                }).hide();
            });
        });
    </script>
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] 
        { 
            new DataColumn("Status"),new DataColumn("Id"),new DataColumn("Title"),
            new DataColumn("Category"),new DataColumn("Type"),new DataColumn("LastUpdated") 
        });
        dt.Rows.Add("Status 1", "1", "Title 1", "Category 1", "Type 1", "Last Updated 1");
        dt.Rows.Add("Status 2", "2", "Title 2", "Category 2", "Type 2", "Last Updated 2");
        dt.Rows.Add("Status 3", "3", "Title 3", "Category 3", "Type 3", "Last Updated 3");
        dt.Rows.Add("Status 4", "4", "Title 4", "Category 4", "Type 4", "Last Updated 4");

        string table = "";
        table += "<table id=\"tbluploaded\" class=\"table table-hover table-striped pagination-ys\">";
        table += "<thead><tr class=\"header\"><th>Status</th><th>ID</th><th>Title</th><th>Category</th><th>Type</th><th>Last Updated</th></tr></thead><tbody>";
        foreach (DataRow dr in dt.Rows)
        {
            table += @"<tr><td>" + dr[0] + "</td><td>" + dr[1] + "</td><td>" + dr[2] + "</td><td>" + dr[3] + "</td><td>" + dr[4] + "</td><td>" + dr[5] + "</td></tr>";
        }
        table += "</tbody></table>";
        litTable.Text = table;
    }
}

Screenshot