将jQuery数据绑定到gridview时出现异常

Question

我正在尝试将jquery数据表绑定到gridview。它抛出了异常。

“表格必须按标题，正文和页脚的顺序包含行部分。”

步骤

1）JavaScript调用

<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）背后的代码

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）异常

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

更改此类代码

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