title: DataTable breaks Nested Repeater and Bootstrap
body: <p>I've run into a issue with DataTables and Nested Repeaters. It basically says that I haven't gotten the correct matching tr td tags. </p>
  
  <p>Yet, I've followed the Nested Repeater tutorial from the link below and to me that the HTML is formed correctly and when I check the DOM and everything seems to be fine. The table looks like a normal table, which then confuses my as top why it's breaking when I initialize the Datatble.</p>
  
  <p><a href="http://www.aspsnippets.com/Articles/Implement-Nested-Repeater-Repeater-inside-Repeater-with-example-in-ASPNet-using-C-and-VBNet.aspx" rel="noreferrer">Click here to see the Nested Repearter Tutorial Example</a>.</p>
  
  <p>It looks  However, when I initialize the DataTable (#TeamDashboard) I get this error: </p>
  
  <pre>
  Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
  <br>
  jquery.dataTables.min.js?v=6754017259857097728:24
  </pre>
  
  <pre><code>&lt;asp:Repeater ID="rptTeamPlayers" runat="server" OnItemDataBound="rptTeamPlayers_ItemDataBound"&gt;               
      &lt;HeaderTemplate&gt;
          &lt;table id="TeamDashboard" class="table table-striped table-condensed marginBottom30 resultTeams" cellspacing="0" rules="all" border="1"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th class="col-xs-1 col-sm-1 col-md-1 setColumnPlusMinus"&gt;&lt;/th&gt;
                      &lt;th class="col-xs-2 col-sm-2 col-md-2"&gt;Name&lt;/th&gt;
                      &lt;th class="col-xs-1 col-sm-1 col-md-1"&gt;Status&lt;/th&gt;
                      &lt;th class="col-xs-3 col-sm-3 col-md-3"&gt;&lt;/th&gt;
                      &lt;th class="col-xs-3 col-sm-3 col-md-3"&gt;Positions&lt;/th&gt;
                      &lt;th class="col-xs-1 col-sm-1 col-md-1"&gt;&lt;/th&gt;
                      &lt;th class="col-xs-1 col-sm-1 col-md-1 text-center"&gt;Action&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody class="searchable"&gt;                                                           
      &lt;/HeaderTemplate&gt;
  &lt;ItemTemplate&gt;
  &lt;tr role="row" class="odd shown regularRow"&gt;
  
          &lt;asp:Panel ID="pnlPlayerDetails" runat="server" &gt;
              &lt;asp:Repeater ID="rptPlayerDetails" runat="server" ClientIDMode="Static"&gt;
                  &lt;ItemTemplate&gt;
                      &lt;%--&lt;table  cellspacing="0" border="0" class="table noPad selected2 closeMe"&gt;--%&gt;
                          &lt;tr class="table noPad selected2 closeMe newRow"&gt;
                              &lt;td class="col-xs-1 col-sm-1 col-md-1 padLeft"&gt;&lt;i class="glyphicon glyphicon-lock"&gt;&lt;/i&gt; | &lt;i class="glyphicon glyphicon-refresh"&gt;&lt;/i&gt;&lt;/td&gt;
                              &lt;td class="col-xs-2 col-sm-2 col-md-1"&gt;&lt;%# DataBinder.Eval(Container.DataItem, "EventDate") %&gt;&lt;/td&gt;
                              &lt;td class="col-xs-1 col-sm-1 col-md-1"&gt;&lt;%# DataBinder.Eval(Container.DataItem, "EventType") %&gt;&lt;/td&gt;
                              &lt;td class="col-xs-5 col-sm-5 col-md-5"&gt;&lt;%# DataBinder.Eval(Container.DataItem, "EventName") %&gt; &lt;i class="fa fa-check-circle colorGreen"&gt;&lt;/i&gt;&lt;/td&gt;
                              &lt;td class="col-xs-4 col-sm-4 col-md-2 col2"&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td class="col-xs-2 col-sm-2 col-md-2"&gt;
                                  &lt;!-- Split button --&gt;
                                  &lt;div class="btn-group btn-block"&gt;
                                      &lt;button type="button" class="btn btn-sm btn-default col-xs-9 col-md-10"&gt;Player Dashboard&lt;/button&gt;
                                      &lt;button type="button" class="btn btn-sm btn-default dropdown-toggle col-xs-3 col-md-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                                      &lt;span class="caret"&gt;&lt;/span&gt;
                                      &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
                                      &lt;/button&gt;
                                      &lt;ul class="dropdown-menu btn-block"&gt;
                                          &lt;li class="NewEvent"&gt;&lt;a href="#"&gt;New Event&lt;/a&gt;&lt;/li&gt;
  
                                      &lt;/ul&gt;
                                  &lt;/div&gt;
                              &lt;/td&gt;
  
                          &lt;/tr&gt;
                      &lt;%--&lt;/table&gt;--%&gt;
                  &lt;/ItemTemplate&gt;
              &lt;/asp:Repeater&gt;
              &lt;/asp:Panel&gt;  
              &lt;td class="details-control"&gt;
                  &lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt;                                                                        
                  &lt;asp:HiddenField ID="hfPlayerId" runat="server" ClientIDMode="Static" Value='&lt;%# DataBinder.Eval(Container.DataItem, "PlayerId") %&gt;' /&gt;
              &lt;/td&gt;
  
              &lt;td class="sorting_1"&gt;
  &lt;%# DataBinder.Eval(Container.DataItem, "PlayerName") %&gt;&lt;/td&gt;
              &lt;td&gt;
  &lt;div class='&lt;%# DataBinder.Eval(Container.DataItem, "Status").ToString().Equals("Able")?"well green status":"well red status" %&gt;'&gt;&lt;%# DataBinder.Eval(Container.DataItem, "Status") %&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;%# DataBinder.Eval(Container.DataItem, "Position") %&gt; &lt;/td&gt;
              &lt;td&gt;
                  &lt;!-- Split button --&gt;
                  &lt;div class="btn-group"&gt;
                      &lt;button type="button" class="DIR btn btn-sm btn-default col-md-8"&gt;&lt;a data-toggle="modal" href="ModalWindows/Daily_Injury_Report.aspx" data-target="#Daily_Injury_Report" class="openDIR"&gt;Open DIR&lt;/a&gt;&lt;/button&gt;
                      &lt;div type="button" class="DIR openDIR_icon btn-sm btn-default col-md-4 dropdown-toggle" &gt;
                      &lt;div class="text-center centerGlyphicon"&gt;&lt;i class="fa fa-check-circle colorGreenTop" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;!-- Split button --&gt;
                  &lt;div class="btn-group btn-block"&gt;
                      &lt;button type="button" class="btn btn-sm btn-default col-xs-9 col-md-10"&gt;Player Dashboard&lt;/button&gt;
                      &lt;button type="button" class="btn btn-sm btn-default dropdown-toggle col-xs-3 col-md-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                      &lt;span class="caret"&gt;&lt;/span&gt;
                      &lt;span class="sr-only"&gt;Toggle Dropdown&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li class="NewEvent"&gt;&lt;a href="#"&gt;New Event&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/td&gt;       
          &lt;/tr&gt;   
  
  
  &lt;/ItemTemplate&gt;
  &lt;FooterTemplate&gt;
  &lt;/table&gt;
  &lt;/FooterTemplate&gt;
  &lt;/asp:Repeater&gt;                
  </code></pre>
  
  <p>This is the code for the initializing the DataTable:</p>
  
  <pre><code>var table = $('#TeamDashboard').DataTable({
  "retrieve": true,
  "bStateSave": true,
  select: true,
  "pagingType": "full_numbers",
  "lengthMenu": [5, 10, 25, 50, 75, 100],
  oLanguage: {
      sLengthMenu: "_MENU_",
  },
  "bAutoWidth": true,
  "searching": false,
  bFilter: true, // This Turns Off The Search Box
  bInfo: true,
  "order": [[2, "desc"]],
  "dom": '&lt;"top"i&gt;rt&lt;"bottom"flp&gt;&lt;"clear"&gt;', 
  "aoColumnDefs": [{ aTargets: [0], bSortable: false },
  { aTargets: [3], bSortable: false },
  { aTargets: [3], bSearchable: false },
  { aTargets: [2], bSearchable: false },
  { aTargets: [5], bSortable: false },
  { aTargets: [5], bSearchable: false,
  { aTargets: [5], bSearchable: false }]
  });
  </code></pre>
  
  <p>Does anyone know where I've gone wrong? Everything seems to be fine, except it end up breaking my JS.</p>
  
  <p>It looks to me as soon as I initialize the DataTable it then breaks the JS on the page...</p>
  
  <p>Thanks in Advance 
  BMCC</p>