.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Accroding to your description,I don't understand your requirment clearly.Could you post your sample image to us?
Since you don't post your sample,I have a guess.You need just like this:
When you enter the searchfield1 and searchfield2 at the same time,the result will be showed in the girdview.
Could you tell us your details of your requirment?
Best regards,
Yijing Sun
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Hi yij! yes your image is correct. I need search fields on the gridview header. The gridview has pagination. So the filter is applied only on the records shown on the current page. I need the filter to be applied over the whole set.
Hi yij! yes your image is correct. I need search fields on the gridview header. The gridview has pagination. So the filter is applied only on the records shown on the current page. I need the filter to be applied over the whole set.
As far as I think,you could use the Web Method which is being called by the jQuery AJAX function which populates the GridView with data and also does Pagination.A jQuery Keyup event handler has been attached to the Search TextBox which will trigger an AJAX
call and will filter the GridView with the matched records.
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
438 Points
606 Posts
Need Jquery script to filter gridview
Sep 25, 2020 10:39 AM|mnmhemaj|LINK
My requirements:
Please help me with some sample codes.
Contributor
3730 Points
1431 Posts
Re: Need Jquery script to filter gridview
Sep 28, 2020 06:33 AM|yij sun|LINK
Hi mnmhemaj,
Accroding to your description,I have created a demo for you.When you keyup the search textbox,it will auto foreach the gridview and check the data.
More details,you could refer to below codes:
<script src="Scripts/jquery-3.4.1.min.js"></script> <script> $(document).ready(function () { $("#GridView1").prepend($("<thead><tr><th colspan='2'><input type=textbox id='search'></th>").append($(this).find("tr:first"))); $('#<%=GridView1.ClientID%> input[id*="search"]').keyup(function (event) { var searchKey = $(this).val().toLowerCase(); $("#GridView1 tr td").each(function () { var cellText = $(this).text().toLowerCase(); if (cellText.indexOf(searchKey) >= 0) { $(this).parent().show(); } else { $(this).parent().hide(); } }); }); }); </script> <asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server" Width="500"> <Columns> <asp:BoundField DataField="Id" HeaderText="Id" /> <asp:BoundField DataField="Year" HeaderText="Year" /> </Columns> </asp:GridView>Result:
Best regards,
Yijing Sun
Member
438 Points
606 Posts
Re: Need Jquery script to filter gridview
Sep 28, 2020 01:00 PM|mnmhemaj|LINK
Thank you yij for your reply. I need search fields for each columns.
Contributor
3730 Points
1431 Posts
Re: Need Jquery script to filter gridview
Sep 29, 2020 07:40 AM|yij sun|LINK
Hi mnmhemaj,
Accroding to your description,I'm guessing that you want the search field could filter all columns?
Just like this:
<script src="Scripts/jquery-3.4.1.min.js"></script> <script> $(document).ready(function () { $("#GridView1").prepend($("<thead><tr><th colspan='2'><input type=textbox id='search'></th>").append($(this).find("tr:first"))); $('#<%=GridView1.ClientID%> input[id*="search"]').keyup(function () { _this = this; $.each($("#GridView1 tbody").find("tr"), function () { if ($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1) $(this).hide(); else $(this).show(); }); }); }); </script> <asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server" Width="500"> <Columns> <asp:BoundField DataField="Id" HeaderText="Id" /> <asp:BoundField DataField="Year" HeaderText="Year" /> </Columns> </asp:GridView>Result:
Best regards,
Yijing Sun
Member
438 Points
606 Posts
Re: Need Jquery script to filter gridview
Sep 30, 2020 12:08 PM|mnmhemaj|LINK
Hi yij sun! Thanks for your reply. I need a search field for each and every column
Contributor
3730 Points
1431 Posts
Re: Need Jquery script to filter gridview
Oct 02, 2020 08:20 AM|yij sun|LINK
Hi mnmhemaj,
Accroding to your description,I don't understand your requirment clearly.Could you post your sample image to us?
Since you don't post your sample,I have a guess.You need just like this:
When you enter the searchfield1 and searchfield2 at the same time,the result will be showed in the girdview.
Could you tell us your details of your requirment?
Best regards,
Yijing Sun
Member
438 Points
606 Posts
Re: Need Jquery script to filter gridview
Oct 02, 2020 11:40 AM|mnmhemaj|LINK
Hi yij! yes your image is correct. I need search fields on the gridview header. The gridview has pagination. So the filter is applied only on the records shown on the current page. I need the filter to be applied over the whole set.
Contributor
3730 Points
1431 Posts
Re: Need Jquery script to filter gridview
Oct 05, 2020 08:00 AM|yij sun|LINK
Hi mnmhemaj,
As far as I think,you could use the Web Method which is being called by the jQuery AJAX function which populates the GridView with data and also does Pagination.A jQuery Keyup event handler has been attached to the Search TextBox which will trigger an AJAX call and will filter the GridView with the matched records.
More details,you could refer to below article:
https://forums.asp.net/t/2162094.aspx?Gridview+multiple+column+filter+using+jquery+datatable
https://www.aspsnippets.com/Articles/Search-GridView-with-Paging-on-TextBox-KeyPress-using-jQuery-in-ASPNet.aspx
Best regards,
Yijing Sun