具有响应式 FooTable 插件的 GridView 因分页而中断

Question

我正在尝试使用 jQuery FooTable 插件在我的 gridview 中实现响应式设计，但在尝试对 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;

您需要执行以下操作：

第一步：在页面上创建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 因分页而中断

GridView with responsive FooTable plugin breaks with paging

c#

asp.net

jquery

gridview

webforms