c# - GridView with responsive FooTable plugin breaks with paging -

i trying implement responsive design in gridview using jquery footable plugin, seem getting caught when trying implement paging gridview. style seems break, , try force regular gridview when click on second page. looks fine when loads. how can solve this?

my code gridview follows:

<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    </emptydatatemplate>    <pagerstyle cssclass="gridview-paging" /> </asp:gridview> 

and populate grid , adjust expandable headings in code behind, set off on button click:

protected void linkbtn_search_click(object sender, eventargs e)     {         //attribute show plus minus button.         gv_programbykeyword.headerrow.cells[0].attributes["data-class"] = "expand";          //attribute hide column in phone.         gv_programbykeyword.headerrow.cells[1].attributes["data-hide"] = "phone";         gv_programbykeyword.headerrow.cells[2].attributes["data-hide"] = "phone";          //adds thead , tbody gridview.         gv_programbykeyword.headerrow.tablesection = tablerowsection.tableheader;          gv_programbykeyword.visible = true;         searchkeywordheader.visible = true;     } 

i had same issue , have fixed changing line below line

 gv_programbykeyword.headerrow.tablesection = tablerowsection.tableheader; 

you need below:

step 1: create jscript function on page:

    <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> 

step 2: change below line:

gv_programbykeyword.headerrow.tablesection = tablerowsection.tableheader; 

to :

scriptmanager.registerstartupscript(this, this.gettype(), "pop", string.format("fixgridview({0});", gv_programbykeyword.clientid),true);

reference