Question

我在同一页面上使用带有数据列表的Jquery数据表。两者都填充服务器端。如果将代码放在数据列表上方，则数据表的效果很好。但是，当放置在数据列表下方时，数据表将丢失其格式/样式，并在控制台中引发错误“未捕获的TypeError：无法读取未定义的属性'mData'”。这是使用ASP.NET Webforms。

            <asp:DataList ID="DataList" runat="server">
                <ItemTemplate>
                    <asp:PlaceHolder ID="PlaceHolder1" runat="server" Visible='<%# !string.IsNullOrEmpty(Eval("Title").ToString()) ? true : false %>'>
                        <tr id="">
                            <td style="width: 171px">Title:</td>
                            <td style="width: 220px">
                                <asp:Label ID="lblTitle" runat="server" Text='<%# Eval("Title") %>'></asp:Label>
                            </td>
                        </tr>
                    </asp:PlaceHolder>
                    <asp:PlaceHolder ID="PlaceHolder2" runat="server" Visible='<%# !string.IsNullOrEmpty(Eval("FirstName").ToString()) ? true : false %>'>
                        <tr id="">
                            <td style="width: 171px">First Name:</td>
                            <td style="width: 220px">
                                <asp:Label ID="Label1" runat="server" Text='<%# Eval("FirstName") %>'></asp:Label>
                            </td>
                        </tr>
                    </asp:PlaceHolder>
                    <asp:PlaceHolder ID="PlaceHolder3" runat="server" Visible='<%# !string.IsNullOrEmpty(Eval("MiddleName").ToString()) ? true : false %>'>
                        <tr id="">
                            <td style="width: 171px">Middle Name:</td>
                            <td style="width: 220px">
                                <asp:Label ID="Label2" runat="server" Text='<%# Eval("MiddleName") %>'></asp:Label>
                            </td>
                        </tr>
                    </asp:PlaceHolder>  
                </ItemTemplate>
            </asp:DataList>
            <hr />

            <h6>DataTable:</h6>

            <asp:GridView ID="tblNotes" runat="server" AutoGenerateColumns="false" CssClass="table table-bordered table-striped dataTables_scrollHead">

                <Columns>
                    <asp:BoundField DataField="Notes" HeaderText="Notes" />
                    <asp:BoundField DataField="CREATEDATE" HeaderText="Created Date" />
                    <asp:BoundField DataField="CREATEDBY" HeaderText="Created By" />
                    <asp:BoundField DataField="MODIFIEDDATE" HeaderText="Modified Date" />
                    <asp:BoundField DataField="MODIFIEDBY" HeaderText="Modified By" />
                </Columns>
            </asp:GridView>

这是Jquery：

$("[id*=tblNotes]").prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
        "paging": true,
        "lengthChange": true,
        "searching": true,
        "ordering": true,
        "info": true,
        "autoWidth": true,
        "responsive": true,
        "dom": 'lBfrtip',
        "buttons": ['excel', 'print', 'pdfHtml5']

在不丢失格式/样式的情况下，将数据表放置在数据列表下方非常重要。

Answer 1

似乎DataList呈现了不完整的table。因此，将DataList放在GridView上方时，您将在html中获得以下内容

<tr id="">
    <td style="width: 171px">Title:</td>
    <td style="width: 220px">
        <asp:Label ID="lblTitle" runat="server" Text='<%# Eval("Title") %>'></asp:Label>
    </td>
</tr>
<hr />

<h6>DataTable:</h6>
<table> GridView Contents </table>

问题在于，下一个表GridView不在父表的<td>内，或者不在上一个表的前面。因此，除非您忘记发布DataList的开始和结束table标签，否则可能是问题所在。相反，它起作用的原因是因为找到了datatables.net可以处理的完整表。

当与数据列表在同一页面上使用时，jQuery数据表中断

1 个答案: