在 asp.net c# 中使用 JavaScript 过滤时保存 gridview 的状态

Question

I'm using javascript to filter my gridview and it works great. The problem is when I click on the gridview to edit an item, it postback and the filtered table is now unfiltered. How can I keep the state of the gridview when using the javascript filter?

Javascript:

<script type="text/javascript">
    function myFunction() {
        //Searcing the table 
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("<%=txtSearch.ClientID %>");
         filter = input.value.toUpperCase();
         table = document.getElementById("<%=gridList.ClientID %>");
        tr = table.getElementsByTagName("tr");

        // Loop through all table rows, and hide those who don't match the search query
        for (i = 0; i < tr.length; i++) {

            td = tr[i].getElementsByTagName("td");

            if (td.length > 0) { // to avoid th 

                //Search the specific column
                if (
                    td[0].innerHTML.toUpperCase().indexOf(filter) > -1 ||
                    td[1].innerHTML.toUpperCase().indexOf(filter) > -1 ||
                    td[2].innerHTML.toUpperCase().indexOf(filter) > -1 ||
                    td[3].innerHTML.toUpperCase().indexOf(filter) > -1 ||
                    td[4].innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>

ASP:

<asp:TextBox ID="txtSearch" runat="server" class="form-control" Visible="true" Width="250px" placeholder="Enter Search Term..." onkeyup="myFunction()"/>

<asp:GridView ID="gridList" runat="server" HorizontalAlign="left" ShowHeader="True" AutoGenerateColumns="false" GridLines="None"
    OnRowEditing="gridList_RowEditing" OnRowCancelingEdit="gridListt_RowCancelingEdit" OnRowUpdating="gridList_RowUpdating">
    <Columns>
        <asp:TemplateField ItemStyle-HorizontalAlign="left" HeaderText="User">
            <ItemTemplate>
                <asp:Label ID="user" Visible="true" runat="server" Text='<%# Eval("User") %> ' />
            </ItemTemplate>

            <EditItemTemplate>
                <asp:TextBox ID="txtUser" class="form-control" runat="server" Text='<%# Eval("User") %> '></asp:TextBox>
            </EditItemTemplate>

        </asp:TemplateField>

        <asp:CommandField ButtonType="Link" ShowEditButton="true" ShowDeleteButton="true" HeaderText="Modify"
            EditText="<span style='font-size: 20px; color: #27ae60;'><span class='glyphicons glyph-edit'></span></span>"
            DeleteText="<span style='font-size: 18px; color: #c0392b;'><span class='glyphicons glyph-bin'></span></span>"
            CancelText="<span style='font-size: 20px; color: #7f8c8d;'><span class='glyphicons glyph-remove-2'></span></span>"
            UpdateText="<span style='font-size: 20px; color: #2980b9;'><span class='glyphicons glyph-floppy-saved'></span></span>" />
    </Columns>
</asp:GridView> 

c# editing a row for example:

protected void gridListt_RowEditing(object sender, GridViewEditEventArgs e)
{
    gridListGiftList.EditIndex = e.NewEditIndex;
    //I need to somehow load the filtered javascript state of the table here rather than the full table
    DataSet dsList = objuser.GetList(0);
    gridList.DataSource = dsList.Tables[0];
    gridList.DataBind();
}

Answer 1

Assuming txtSearch is an ASP.NET control, it should retain its state on a postback. I'm assuming the search box doesn't get cleared out when you save a row.

Why not just run myFunction() on window.onload in addition to the button click event that already runs it.. Then add a conditional in it to check for blank search values before executing your code:

    function myFunction() {
    //Searcing the table 
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("txtSearch");
    filter = input.value.toUpperCase();
    table = document.getElementById("gridList");
    tr = table.getElementsByTagName("tr");
    if (input.value != "") {
       for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        if (td.length > 0) { // to avoid th 
            //Search the specific column
            if (  td[0].innerHTML.toUpperCase().indexOf(filter) > -1 ||
 td[1].innerHTML.toUpperCase().indexOf(filter) > -1 ||
 td[2].innerHTML.toUpperCase().indexOf(filter) > -1 ||
 td[3].innerHTML.toUpperCase().indexOf(filter) > -1 ||
 td[4].innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }           
       }
    }
    else {
            for (i = 0; i < tr.length; i++) {
                tr[i].style.display = "";
            }
        }
    }    
    window.onload = myFunction;

Answer 2

Assuming your txtSearch looks like this

<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>

Then you simply have to check in code behind if there is a PostBack and if the TextBox has a Value. Then use ScriptManager to execute myFunction() again. I've placed the code in Page_Load , but you could also place it in gridListt_RowEditing

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack && !string.IsNullOrEmpty(txtSearch.Text))
    {
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "reFilter", "myFunction()", true);
    }
}

However if you are doing self build sorting and filtering stuff on a html table, I would recommend looking into DataTables.net

Answer 3

Please try following. There should be no post back on grid view.Even edit should happen through api methods via Ajax.

As someone mentioned use https://datatables.net/ it is a good approach. Instead of using gridview use api enabled solution

The other way is when you filter anything save it in a hidden field and read it from server side post back and implement same filtering from server side (harder way).

I cannot provide code at this time.But I had implemented it in past.