[Solved] jQuery DataTable Error: The table must contain row sections in order of header, body, then footer

<script type="text/javascript" src="../Scripts/jqueryb 1.8.3.min.js"></script>
<script type="text/javascript" src="../Scripts/Jquery.datatables.min.js"></script>
<script type="text/javascript" src="../Scripts/datatable.fixedColumns.min.js"></script>
<link href="../Scripts/Jquery.datatables.min.css" rel="stylesheet" type="text/css" />
<link href="../Scripts/fixedColumns.dataTables.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        $('#StudentGridLedger tfoot tr').appendTo('#StudentGridLedger thead');
        $('#StudentGridLedger').removeAttr('width').DataTable({
            bLengthChange: true,
            lengthMenu: [[5, 10, -1], [5, 10, "All"]],
            bFilter: true,
            bSort: true,
            scrollCollapse: true,
            paging: true,
            fixedColumns: false,
            orderCellsTop: true
        });
    });
</script>
<asp:GridView ID="StudentGridLedger" runat="server" AutoGenerateColumns="False" Height="16px" Width="1309px" AllowPaging="True" ShowFooter="True">
    <Columns>
        <asp:BoundField DataField="serialno" HeaderText="AcNo." />
        <asp:BoundField DataField="BookName" HeaderText="Book Name" />
        <asp:BoundField DataField="Author" HeaderText="Author" />
        <asp:BoundField DataField="Category" HeaderText="Category" />
        <asp:BoundField DataField="Datetaken" HeaderText="Date Taken" />
        <asp:BoundField DataField="Datereturned" HeaderText="Date Returned" />
        <asp:TemplateField HeaderText="Due Date">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Duedate") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Bind("Duedate") %>' Visible="False"></asp:Label>
                <asp:TextBox ID="Duedate" runat="server" Text='<%# Bind("Duedate") %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Dout" HeaderText="OverDue" />
        <asp:TemplateField HeaderText="Remarks">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("particulars") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label2" runat="server" Text='<%# Bind("particulars") %>' Visible="False"></asp:Label>
                <asp:TextBox ID="Remarks" runat="server" Text='<%# Eval("particulars") %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        ' BindDummyRow()
        Dim currentdr As System.DateTime = System.DateTime.Now
        Datetr.Text = Convert.ToDateTime(DateTime.Now.ToString("HH:mm:ss"))
        Account.Text = Session("account").ToString
        Names.Text = Session("Names").ToString
        Classr.Text = Session("Class").ToString
        Streamr.Text = Session("Stream").ToString
        Types.Text = Session("types").ToString
        Program.Text = Session("Program").ToString
        Regno.Text = Session("regno").ToString
        Librarians.Text = Session("Username").ToString
        BindGrid()
    End If
End Sub
Protected Sub BindGrid()
    Using con As New SqlConnection(conString)
        Using cmd As New SqlCommand()
            cmd.CommandText = "SELECT serialno,ledgerkey,bookcode,bookname,author,category,datetaken,markreturned,names,datereturned,particulars,duedate,d2,Dout FROM ledger WHERE account = @ContactName and ISNULL(Category,'') = ''"
            cmd.Connection = con
            cmd.Parameters.AddWithValue("@ContactName", Account.Text.Trim())
            Dim dt As New DataTable()
            Using sda As New SqlDataAdapter(cmd)
                sda.Fill(dt)
                If dt.Rows.Count > 0 Then
                    'Ledger.DataSource = Nothing
                    StudentGridLedger.DataSource = Nothing
                    ' Ledger.DataSource = dt
                    StudentGridLedger.DataSource = dt
                    StudentGridLedger.DataBind()
                    StudentGridLedger.UseAccessibleHeader = True
                    StudentGridLedger.FooterRow.TableSection = TableRowSection.TableFooter
                    StudentGridLedger.HeaderRow.TableSection = TableRowSection.TableHeader
                Else
                    Exit Sub
                End If
            End Using
        End Using
    End Using
End sub

Server Error in '/' Application.
The table  must contain row sections in order of header, body, then footer.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
 
Exception Details: System.Web.HttpException: The table  must contain row sections in order of header, body, then footer.
 
Source Error:
 
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.
 
Stack Trace:
 
 
[HttpException (0x80004005): The table  must contain row sections in order of header, body, then footer.]