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

Posted 2023-04-13

【中文标题】将jQuery数据表绑定到gridview时出现异常

【英文标题】：Exception while binding jQuery datatable to gridview

【发布时间】：2013-03-23 06:33:05

【问题描述】：

我正在尝试将 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

【问题讨论】：

+1 格式正确的问题和链接可能会有所帮助：forums.asp.net/t/1330555.aspx/1

尝试***.com/questions/8200681/… 将 Jquery DataTables 插件应用到 ASP GridView

这可能会有所帮助：***.com/a/3544027/720771***.com/questions/8630967/…

Ronak 是对的，我在同样的情况下遇到了同样的错误，***.com/questions/431413/… 修复了它。我鼓励作者在这里交叉发布。

【参考方案1】：

像这样修改代码

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