title: Jquery Datatables breaks when using on same page with Data List
body: <p>I am using Jquery datatables on the same page with a data list. Both are populated server side. The datatables works great if I place the code above the data list. However, when placed below the data list, the datatables loses it's formatting/style and throws an error "Uncaught TypeError: Cannot read property 'mData' of undefined" in the console. This is using ASP.NET Webforms. </p>
  
  <pre><code>            &lt;asp:DataList ID="DataList" runat="server"&gt;
                  &lt;ItemTemplate&gt;
                      &lt;asp:PlaceHolder ID="PlaceHolder1" runat="server" Visible='&lt;%# !string.IsNullOrEmpty(Eval("Title").ToString()) ? true : false %&gt;'&gt;
                          &lt;tr id=""&gt;
                              &lt;td style="width: 171px"&gt;Title:&lt;/td&gt;
                              &lt;td style="width: 220px"&gt;
                                  &lt;asp:Label ID="lblTitle" runat="server" Text='&lt;%# Eval("Title") %&gt;'&gt;&lt;/asp:Label&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/asp:PlaceHolder&gt;
                      &lt;asp:PlaceHolder ID="PlaceHolder2" runat="server" Visible='&lt;%# !string.IsNullOrEmpty(Eval("FirstName").ToString()) ? true : false %&gt;'&gt;
                          &lt;tr id=""&gt;
                              &lt;td style="width: 171px"&gt;First Name:&lt;/td&gt;
                              &lt;td style="width: 220px"&gt;
                                  &lt;asp:Label ID="Label1" runat="server" Text='&lt;%# Eval("FirstName") %&gt;'&gt;&lt;/asp:Label&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/asp:PlaceHolder&gt;
                      &lt;asp:PlaceHolder ID="PlaceHolder3" runat="server" Visible='&lt;%# !string.IsNullOrEmpty(Eval("MiddleName").ToString()) ? true : false %&gt;'&gt;
                          &lt;tr id=""&gt;
                              &lt;td style="width: 171px"&gt;Middle Name:&lt;/td&gt;
                              &lt;td style="width: 220px"&gt;
                                  &lt;asp:Label ID="Label2" runat="server" Text='&lt;%# Eval("MiddleName") %&gt;'&gt;&lt;/asp:Label&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/asp:PlaceHolder&gt;  
                  &lt;/ItemTemplate&gt;
              &lt;/asp:DataList&gt;
              &lt;hr /&gt;
  
              &lt;h6&gt;DataTable:&lt;/h6&gt;
  
              &lt;asp:GridView ID="tblNotes" runat="server" AutoGenerateColumns="false" CssClass="table table-bordered table-striped dataTables_scrollHead"&gt;
  
                  &lt;Columns&gt;
                      &lt;asp:BoundField DataField="Notes" HeaderText="Notes" /&gt;
                      &lt;asp:BoundField DataField="CREATEDATE" HeaderText="Created Date" /&gt;
                      &lt;asp:BoundField DataField="CREATEDBY" HeaderText="Created By" /&gt;
                      &lt;asp:BoundField DataField="MODIFIEDDATE" HeaderText="Modified Date" /&gt;
                      &lt;asp:BoundField DataField="MODIFIEDBY" HeaderText="Modified By" /&gt;
                  &lt;/Columns&gt;
              &lt;/asp:GridView&gt;
  </code></pre>
  
  <p>Here's the Jquery:</p>
  
  <pre><code>$("[id*=tblNotes]").prepend($("&lt;thead&gt;&lt;/thead&gt;").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']
  </code></pre>
  
  <p>It's important that the DataTables be placed below the Datalist without losing formatting/style. </p>