带有响应式 FooTable 插件的 GridView 因分页而中断答案

【问题标题】：GridView with responsive FooTable plugin breaks with paging带有响应式 FooTable 插件的 GridView 因分页而中断
【发布时间】：2015-03-28 18:48:40
【问题描述】：

我正在尝试使用 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;
    }

【问题讨论】：

标签： c# jquery asp.net gridview webforms

【解决方案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

【讨论】：