c# - 将 jQuery 数据表绑定(bind)到 gridview 时出现异常

Question

我正在尝试将 jquery 数据表绑定(bind)到 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']          
    });