Quicksearch using jquery quicksearch plugin in asp.net table
Question
I am trying to implement jquery quicksearch plugin in my asp.net application. the below code is working in ASP.NET GridView but not in a ASP.NET table. Please Help
I have a ASP.NET table and I want to filter/search the table row on keydown/textchange event on a textbox in realtime. Whenever I type something in the textbox, if the particular text is present in the table, only that particular row should be visible.
Please help... My project going to go live in 9 days.
<script type="text/javascript">
$(function () {
$('input#id_search').quicksearch('table#Table1 tbody tr');
})
</script>
<script src="scripts/jquery-1.4.1-vsdoc.js"></script>
<script src="scripts/jquery-1.4.1.js"></script>
<script src="scripts/jquery-1.4.1.min.js"></script>
<script src="scripts/jquery.quicksearch.js"></script>
<form runat="server">
<div>
<input id=id_search type=text placeholder="Search" />
</div>
<div>
<asp:Table ID="Table1" runat="server" ClientIDMode="Static" CssClass="table table-responsive">
<asp:TableHeaderRow>
<asp:TableHeaderCell Text="Block"></asp:TableHeaderCell>
<asp:TableHeaderCell Text="Flat"></asp:TableHeaderCell>
<asp:TableHeaderCell Text="Name"></asp:TableHeaderCell>
</asp:TableHeaderRow>
<asp:TableRow>
<asp:TableCell Text="B-Wing"></asp:TableCell>
<asp:TableCell Text="101"></asp:TableCell>
<asp:TableCell Text="ABC"></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell Text="A-wing"></asp:TableCell>
<asp:TableCell Text="102"></asp:TableCell>
<asp:TableCell Text="DEF"></asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
</form>
1 answers
solution1
0 2014-09-22 15:10:55
Tbody is not getting generated...Also check below jquery reference
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('input#id_search').quicksearch('table#Table1 tr');
});
</script>
EDIT : Full source code of the page which works at my machine Ensure that Scripts are present in their place.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ControlTest.WebForm1" %>
<%@ Register Assembly="ControlTest" Namespace="ControlTest" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
<%--<script src="Scripts/jquery-2.1.0.js" type="text/javascript"></script>--%>
<script src="jquery.quicksearch.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id=id_search type=text placeholder="Search" />
</div>
<div>
<asp:Table ID="Table1" runat="server" ClientIDMode="Static" CssClass="table table-responsive">
<asp:TableHeaderRow>
<asp:TableHeaderCell Text="Block"></asp:TableHeaderCell>
<asp:TableHeaderCell Text="Flat"></asp:TableHeaderCell>
<asp:TableHeaderCell Text="Name"></asp:TableHeaderCell>
</asp:TableHeaderRow>
<asp:TableRow>
<asp:TableCell Text="B-Wing"></asp:TableCell>
<asp:TableCell Text="101"></asp:TableCell>
<asp:TableCell Text="ABC"></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell Text="A-wing"></asp:TableCell>
<asp:TableCell Text="102"></asp:TableCell>
<asp:TableCell Text="DEF"></asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
<script>
$(document).ready(function () {
//$('input#id_search').quicksearch('table#Table1 tr');
$('input#id_search').quicksearch('table#Table1 tr');
});
//
</script>
</form>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.