title: Footable jquery plugin not working with asp.net Gridview and pagination
body: <p>I am using Masterpage with content place holder, inside i am generating my Gridview. </p>
  
  <p>I am using Footable Jquery plugin in order to render it responsive. But when i use the pagination option of the Gridview i loose the footable css and js functionality. </p>
  
  <p><strong>aspx page</strong></p>
  
  <pre><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/www/MasterPage.master" AutoEventWireup="true" CodeFile="articleListing.aspx.cs" Inherits="www_articleListing" %&gt;
  
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(function () {
          $('#&lt;%=GridView1.ClientID%&gt;').footable();
      });
  &lt;/script&gt;
  &lt;link href="../css/article.css" rel="stylesheet" /&gt;
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"&gt;
  &lt;asp:GridView ID="GridView1" CssClass="footable" runat="server" AutoGenerateColumns="False" DataKeyNames="id_article" 
      data-page-size="10" DataSourceID="SqlDataSource1" AllowSorting="True" AllowPaging="True"&gt;
      &lt;Columns&gt;
          &lt;%--&lt;asp:CommandField ShowCancelButton="False" ShowDeleteButton="True" ShowEditButton="True" /&gt;--%&gt;
          &lt;asp:CommandField ShowEditButton="true" ButtonType="Image" ControlStyle-Width="16px" EditImageUrl="../Images/icons/edit-button.png" ItemStyle-Width="25px" UpdateText="Edit" /&gt;
          &lt;asp:CommandField ShowDeleteButton="true" ButtonType="Image" ControlStyle-Width="16px" DeleteImageUrl="../Images/icons/delete-button.png" ItemStyle-Width="25px" /&gt;
          &lt;asp:BoundField DataField="id_article" HeaderText="#" InsertVisible="False" ReadOnly="True" SortExpression="id_article" Visible="False" /&gt;
          &lt;asp:BoundField DataField="article_title" HeaderText="Title" SortExpression="article_title" /&gt;
          &lt;asp:BoundField DataField="article_writer" HeaderText="Writer" SortExpression="article_writer" /&gt;
          &lt;asp:BoundField DataField="article_date" HeaderText="Date" SortExpression="article_date" /&gt;
          &lt;asp:BoundField DataField="article_time" HeaderText="Time" SortExpression="article_time" /&gt;
      &lt;/Columns&gt;
  &lt;/asp:GridView&gt;
  &lt;asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="&lt;%$ ConnectionStrings:ConnStr1 %&gt;" SelectCommand="SELECT [id_article], [article_title], [article_writer], [article_date], [article_time] FROM [articles] ORDER BY [article_date] DESC, [article_time] DESC"&gt;&lt;/asp:SqlDataSource&gt;
  
  &lt;a class="ui-button ui-widget ui-corner-all" id="newArticleBTN" href="addArticle.aspx"&gt;New article&lt;/a&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p><strong>C# page</strong></p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  using System.Data;
  
  public partial class www_articleListing : System.Web.UI.Page
  {
  protected void Page_Load(object sender, EventArgs e)
  {
      if (!IsPostBack)
      {
          BindGrid();
      }
  }
  
  private void BindGrid()
  {
      //Attribute to show the Plus Minus Button.
      GridView1.HeaderRow.Cells[0].Attributes["data-class"] = "expand";
  
      //Attribute to hide column in Phone.
      GridView1.HeaderRow.Cells[4].Attributes["data-hide"] = "phone";
      GridView1.HeaderRow.Cells[5].Attributes["data-hide"] = "phone";
      GridView1.HeaderRow.Cells[6].Attributes["data-hide"] = "phone";
  
      //Adds THEAD and TBODY to GridView.
      GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
  }
  </code></pre>
  
  <p><strong>Masterpage header</strong></p>
  
  <pre><code>&lt;%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="www_MasterPage" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
  &lt;title&gt; &lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"&gt;
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/&gt;
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/&gt;
  &lt;link href="../css/main.css" rel="stylesheet" /&gt;
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;       &lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/HafYK.png" rel="nofollow noreferrer"><strong>First page look like that</strong></a></p>
  
  <p><a href="https://i.stack.imgur.com/lLdJs.png" rel="nofollow noreferrer"><strong>After clicking on the pagination the page look like</strong></a></p>
  
  <p>didn't found any working solution for that issue, please help</p>