Jquery Datatables разрывается при использовании на одной странице со списком данных - PullRequest
Новая
       28

Jquery Datatables разрывается при использовании на одной странице со списком данных

0 голосов
/ 16 января 2019

Я использую таблицы данных Jquery на той же странице со списком данных. Оба заполняются на стороне сервера. Таблицы данных отлично работают, если я размещу код над списком данных. Однако при размещении под списком данных таблицы данных теряют свое форматирование / стиль и выдают ошибку «Uncaught TypeError: Невозможно прочитать свойство« mData »из undefined» в консоли. Это использует 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']

Важно, чтобы таблицы данных располагались под списком данных без потери форматирования / стиля.

1 Ответ

0 голосов
/ 17 января 2019

Похоже, 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> родительской таблицы, или ей предшествует закрытие предыдущей. Поэтому, если вы не забыли опубликовать открывающий и закрывающий теги table в DataList, возможно, это проблема. Причина, по которой он работает наоборот, заключается в том, что найдена полная таблица, которую datatables.net может обработать.

...