Question

我正在尝试使用jQuery FooTable插件在我的gridview中实现响应式设计，但是当尝试在gridview中实现分页时似乎陷入了困境。风格似乎打破了，并且当我点击第二页时尝试强制定期网格视图。它最初加载时看起来完全没问题。我该如何解决这个问题？

我对gridview的代码如下：

<asp:GridView ID="GV_ProgramByKeyword" runat="server" Visible="false" AllowPaging="True" AutoGenerateColumns="False" DataSourceID="ODS_ProgramByKeyword" CssClass="footable" GridLines="None">
   <Columns>
      <asp:BoundField DataField="ProgramName" HeaderText="Program" SortExpression="ProgramName" />
      <asp:BoundField DataField="CredentialType" HeaderText="Credential" SortExpression="CredentialType" />
      <asp:BoundField DataField="CategoryName" HeaderText="Category" SortExpression="CategoryName" />
      <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" Visible="False" />
      <asp:BoundField DataField="CategoryDescription" HeaderText="CategoryDescription" SortExpression="CategoryDescription" Visible="False" />
   </Columns>
   <EmptyDataTemplate>
      No data available now
   </EmptyDataTemplate>
   <PagerStyle CssClass="gridview-paging" />
</asp:GridView>

这就是我填充网格并在后面的代码中调整可扩展标题的地方，点击按钮时出现：

protected void LinkBtn_Search_Click(object sender, EventArgs e)
    {
        //Attribute to show the Plus Minus Button.
        GV_ProgramByKeyword.HeaderRow.Cells[0].Attributes["data-class"] = "expand";

        //Attribute to hide column in Phone.
        GV_ProgramByKeyword.HeaderRow.Cells[1].Attributes["data-hide"] = "phone";
        GV_ProgramByKeyword.HeaderRow.Cells[2].Attributes["data-hide"] = "phone";

        //Adds THEAD and TBODY to GridView.
        GV_ProgramByKeyword.HeaderRow.TableSection = TableRowSection.TableHeader;

        GV_ProgramByKeyword.Visible = true;
        SearchKeywordHeader.Visible = true;
    }

Answer 1

我遇到了同样的问题，我通过更改行下方的行来修复它

 GV_ProgramByKeyword.HeaderRow.TableSection = TableRowSection.TableHeader;

您需要执行以下操作：

第1步：在页面上创建jscript函数：

    <script>
    function fixGridView(tableEl) {
        var jTbl = $(tableEl);

        if (jTbl.find("tbody>tr>th").length > 0) {
            jTbl.find("tbody").before("<thead><tr></tr></thead>");
            jTbl.find("thead tr").append(jTbl.find("th"));
            jTbl.find("tbody tr:first").remove();
        }
    }
    </script>

第2步：更改以下行：

GV_ProgramByKeyword.HeaderRow.TableSection = TableRowSection.TableHeader;

到：

ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", string.Format("fixGridView({0});", GV_ProgramByKeyword.ClientID),true);

Reference

具有响应式FooTable插件的GridView打破了分页

1 个答案: