locked
Need Jquery script to filter gridview RRS feed

  • Question

  • User-809753952 posted

    My requirements:

    • Search fields on Gridview Header.
    • Searching must be done by jquery script.

    Please help me with some sample codes.

    Friday, September 25, 2020 10:39 AM

Answers

  • User1535942433 posted

    Hi mnmhemaj,

    I need a search field for each and every column

    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

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 2, 2020 8:20 AM
  • User1535942433 posted

    Hi mnmhemaj,

    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.

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 5, 2020 8:00 AM

All replies

  • User1535942433 posted

    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

    Monday, September 28, 2020 6:33 AM
  • User-809753952 posted

    Thank you yij for your reply. I need search fields for each columns.

    Monday, September 28, 2020 1:00 PM
  • User1535942433 posted

    Hi mnmhemaj,

    I need search fields for each columns.

    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

    Tuesday, September 29, 2020 7:40 AM
  • User-809753952 posted

    Hi yij sun!  Thanks for your reply. I need a search field for each and every column

    Wednesday, September 30, 2020 12:08 PM
  • User1535942433 posted

    Hi mnmhemaj,

    I need a search field for each and every column

    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

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 2, 2020 8:20 AM
  • User-809753952 posted

    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.

    Friday, October 2, 2020 11:40 AM
  • User1535942433 posted

    Hi mnmhemaj,

    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.

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 5, 2020 8:00 AM