Exception while binding jQuery datatable to gridvi

Question

I am trying to bind jquery datatable to gridview. It throws exception.

"The table must contain row sections in order of header, body, then footer. "

Steps

1) JavaScript call

<script type="text/javascript" charset="utf-8">
/* Define two custom functions (asc and desc) for string sorting */
  $(document).ready(function () {
    /* Build the DataTable with third column using our custom sort functions */
    $('#gvInitiavtives').dataTable({
        "aaSorting": [[0, 'asc']          
    });
});

2) Gridview

 <asp:GridView ID="gvInitiavtives" runat="server" Width="100%" CssClass="Grid" 
                     RowStyle-Width="30px" AutoGenerateColumns="false" HeaderStyle-CssClass="GridHeader"  RowStyle-CssClass="GridItem" AlternatingRowStyle-CssClass="GridAltItem"  DataKeyNames="InitiativeIdx" AllowSorting="true" ClientIDMode="Static" >
                <EmptyDataRowStyle BorderStyle="None" BorderWidth="0px" />
                <EmptyDataTemplate>
                    <asp:Label ID="lblNorecId" runat="server" Text="Sorry! Your requested records are not found, please try with other search criteria." Font-Bold="true" ForeColor="red" Font-Names="Arial" Font-Size="small"></asp:Label>
                </EmptyDataTemplate>
                <Columns>
                    <asp:BoundField DataField="BusinessUnit" HeaderText="" HeaderStyle-Wrap="false" HeaderStyle-HorizontalAlign="NotSet" SortExpression="BusinessUnit" />
                    <asp:TemplateField>
                    <ItemTemplate>

                    <asp:Label ID="lblInitiaiveName" runat="server" Text='<%# Bind("InitiativeName") %>' ToolTip ='<%# String.Format("{0} ; {1}",Eval("Initiative"), Eval("InitiativeDescription")) %>' ></asp:Label>
                    </ItemTemplate>
                    </asp:TemplateField>
---
---
</Columns>
            </asp:GridView>

3) code behind

protected void Page_PreRender(object sender, System.EventArgs e)
{
    // support for jquery datatables
    if (gvInitiavtives.Rows.Count > 0) {
        gvInitiavtives.UseAccessibleHeader = true;
        gvInitiavtives.HeaderRow.TableSection = TableRowSection.TableHeader;
    }

}

4) Exception

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.]
   System.Web.UI.WebControls.Table.RenderContents(HtmlTextWriter writer) +8790317
   System.Web.UI.WebControls.WebControl.Render(HtmlTextWriter writer) +32

Answer 1

Change code like this

$('[id*=gvInitiavtives]').prepend($("<thead></thead>").append($(this).find("[id*=gvInitiavtives] tr:first"))).dataTable({
"aaSorting": [[0, 'asc']          
    });