GridView с отзывчивыми плагинами FooTable с paging

Question

Я пытаюсь реализовать отзывчивый дизайн в своем gridview с помощью плагина 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