将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) 网格视图

 <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']          
    });