DataTable разрывает вложенные повторители и загрузочные файлы

Question

У меня возникла проблема с DataTables и Nested Repeaters. В основном это говорит о том, что я не получил правильные теги tr td.

Тем не менее, я следил за учебником Nested Repeater по ссылке ниже и ко мне, что HTML сформирован правильно, и когда я проверяю DOM, и все кажется прекрасным. Таблица выглядит как обычная таблица, которая затем путает меня как верх, почему она ломается, когда я инициализирую Datatble.

Click here to see the Nested Repearter Tutorial Example.

Это выглядит Однако, когда я инициализировать DataTable (#TeamDashboard) Я получаю эту ошибку:

 
Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined 

 
jquery.dataTables.min.js?v=6754017259857097728:24 

<asp:Repeater ID="rptTeamPlayers" runat="server" OnItemDataBound="rptTeamPlayers_ItemDataBound">    
    <HeaderTemplate> 
     <table id="TeamDashboard" class="table table-striped table-condensed marginBottom30 resultTeams" cellspacing="0" rules="all" border="1"> 
      <thead> 
       <tr> 
        <th class="col-xs-1 col-sm-1 col-md-1 setColumnPlusMinus"></th> 
        <th class="col-xs-2 col-sm-2 col-md-2">Name</th> 
        <th class="col-xs-1 col-sm-1 col-md-1">Status</th> 
        <th class="col-xs-3 col-sm-3 col-md-3"></th> 
        <th class="col-xs-3 col-sm-3 col-md-3">Positions</th> 
        <th class="col-xs-1 col-sm-1 col-md-1"></th> 
        <th class="col-xs-1 col-sm-1 col-md-1 text-center">Action</th> 
       </tr> 
      </thead> 
      <tbody class="searchable">               
    </HeaderTemplate> 
<ItemTemplate> 
<tr role="row" class="odd shown regularRow"> 

     <asp:Panel ID="pnlPlayerDetails" runat="server" > 
      <asp:Repeater ID="rptPlayerDetails" runat="server" ClientIDMode="Static"> 
       <ItemTemplate> 
        <%--<table cellspacing="0" border="0" class="table noPad selected2 closeMe">--%> 
         <tr class="table noPad selected2 closeMe newRow"> 
          <td class="col-xs-1 col-sm-1 col-md-1 padLeft"><i class="glyphicon glyphicon-lock"></i> | <i class="glyphicon glyphicon-refresh"></i></td> 
          <td class="col-xs-2 col-sm-2 col-md-1"><%# DataBinder.Eval(Container.DataItem, "EventDate") %></td> 
          <td class="col-xs-1 col-sm-1 col-md-1"><%# DataBinder.Eval(Container.DataItem, "EventType") %></td> 
          <td class="col-xs-5 col-sm-5 col-md-5"><%# DataBinder.Eval(Container.DataItem, "EventName") %> <i class="fa fa-check-circle colorGreen"></i></td> 
          <td class="col-xs-4 col-sm-4 col-md-2 col2"></td> 
          <td></td> 
          <td class="col-xs-2 col-sm-2 col-md-2"> 
           <!-- Split button --> 
           <div class="btn-group btn-block"> 
            <button type="button" class="btn btn-sm btn-default col-xs-9 col-md-10">Player Dashboard</button> 
            <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"> 
            <span class="caret"></span> 
            <span class="sr-only">Toggle Dropdown</span> 
            </button> 
            <ul class="dropdown-menu btn-block"> 
             <li class="NewEvent"><a href="#">New Event</a></li> 

            </ul> 
           </div> 
          </td> 

         </tr> 
        <%--</table>--%> 
       </ItemTemplate> 
      </asp:Repeater> 
      </asp:Panel> 
      <td class="details-control"> 
       <i class="glyphicon glyphicon-plus"></i>                   
       <asp:HiddenField ID="hfPlayerId" runat="server" ClientIDMode="Static" Value='<%# DataBinder.Eval(Container.DataItem, "PlayerId") %>' /> 
      </td> 

      <td class="sorting_1"> 
<%# DataBinder.Eval(Container.DataItem, "PlayerName") %></td> 
      <td> 
<div class='<%# DataBinder.Eval(Container.DataItem, "Status").ToString().Equals("Able")?"well green status":"well red status" %>'><%# DataBinder.Eval(Container.DataItem, "Status") %></div></td> 
      <td></td> 
      <td><%# DataBinder.Eval(Container.DataItem, "Position") %> </td> 
      <td> 
       <!-- Split button --> 
       <div class="btn-group"> 
        <button type="button" class="DIR btn btn-sm btn-default col-md-8"><a data-toggle="modal" href="ModalWindows/Daily_Injury_Report.aspx" data-target="#Daily_Injury_Report" class="openDIR">Open DIR</a></button> 
        <div type="button" class="DIR openDIR_icon btn-sm btn-default col-md-4 dropdown-toggle" > 
        <div class="text-center centerGlyphicon"><i class="fa fa-check-circle colorGreenTop" aria-hidden="true"></i></div> 
        </div> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Action</a></li> 
        </ul> 
       </div> 
      </td> 
      <td> 
       <!-- Split button --> 
       <div class="btn-group btn-block"> 
        <button type="button" class="btn btn-sm btn-default col-xs-9 col-md-10">Player Dashboard</button> 
        <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"> 
        <span class="caret"></span> 
        <span class="sr-only">Toggle Dropdown</span> 
        </button> 
        <ul class="dropdown-menu"> 
         <li class="NewEvent"><a href="#">New Event</a></li> 
        </ul> 
       </div> 
      </td>  
     </tr> 


</ItemTemplate> 
<FooterTemplate> 
</table> 
</FooterTemplate> 
</asp:Repeater>     

Это код для инициализация DataTable:

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": '<"top"i>rt<"bottom"flp><"clear">', 
"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 }] 
}); 

ли кто-нибудь знает, где я ошибся? Кажется, все в порядке, за исключением того, что в конечном итоге я разбил свой JS.

Он смотрит на меня, как только я инициализировать DataTable тогда разбивает JS на странице ...

Заранее спасибо BMCC

Answer 1

Несоответствие количества заголовков столбцов вызвать этот вопрос , должно быть равное количество столбцов заголовка и столбцов строк. Или несоответствие «aoColumns» или «aoColumnDefs»

Answer 2

У меня была эта проблема с неправильным индексом в columnDefs:

"columnDefs": [ 
     { // set default column settings 
      "orderable": false, 
      "targets": [1, 2, 4] 
     } 
] 

Обратите внимание, что targets указать индекс столбца которые начинаются с 0. В моем случае У меня не было пятой колонки, но я упомянул индекс 4, который давал мне ошибку.

Answer 3

Проверьте количество колонок, установленных ... "aoColumns": [ null, null, { "sType": "uk_date" }, { "sType": "uk_date" }, null, null ]

Answer 4

Я имел эту ошибку, когда я назвал DataTable методы и у меня было 2 таблицы на одной странице с тем же идентификатором. Так что-то вроде:

<table id="myTable"/> 
... 
<table id="myTable"/>