Gridview Footable Paging

Question

User-728446177 posted

I am getting error 'The table  must contain row sections in order of header, body, then footer.' trying to do footable paging in asp.net gridview.  Please see below the code. What have i got wrong?  Thanks in advance. 

  <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.0/footable.standalone.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.0/footable.core.bootstrap.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.0/footable.js"></script>
     <script type="text/javascript">
         $(function () {
             $('#<%= GridView1.ClientID%>').footable()
        });
     </script>

 <asp:GridView ID="GridView1" runat="server"  HorizontalAlign="Center" CssClass="footable" OnRowCreated="GridView1_RowCreated"
                        OnRowCommand="GridView1_RowCommand" AutoGenerateColumns="false" data-page-size="3" AllowPaging="true" OnRowDataBound="bound" ShowFooter="true"
                        DataKeyNames="ID" >
                        
                         <Columns>
                            
                         
                            <asp:BoundField DataField="ID" HeaderText="ID" />
                            <asp:BoundField DataField="Server" HeaderText="Server" />
                             <asp:BoundField DataField="Site" HeaderText="Site" />
                            <asp:BoundField DataField="Area" HeaderText="Area" ItemStyle-Width="100px" ItemStyle-Wrap="true"/>
                            <asp:BoundField DataField="Description" HeaderText="Description"  ItemStyle-Width="700px" ItemStyle-Wrap="true" />
                            <asp:BoundField DataField="Status" HeaderText="Status" />
                            <asp:BoundField DataField="Assigned To" HeaderText="Assigned To" />
                            <asp:BoundField DataField="Test By" HeaderText="Created By" />
                            <asp:BoundField DataField="Test Date" HeaderText="Creation Date" />
                            <asp:BoundField DataField="Priority" HeaderText="Priority" />
                        </Columns>
                    </asp:GridView>

    protected void Page_Load(object sender, EventArgs e)
        {

            if (!IsPostBack)
            {
               
                BindGrid();
                
            }
           }

  public void BindGrid()
        {

            
            string sp1 = "GetHuHu";
            DataTable HuHu = MySQLHelper.ExecuteDataTable(sp1);
            dt = HuHu;
            //Bind the fetched data to gridview
            if (dt.Rows.Count > 0)
            {
                GridView1.DataSource = HuHu;
                GridView1.DataBind();
                GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
                GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
            }

        }