问题
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.
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.
Click here to see the Nested Repearter Tutorial Example.
It looks However, when I initialize the DataTable (#TeamDashboard) I get this error:
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>
This is the code for the initializing the 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 }]
});
Does anyone know where I've gone wrong? Everything seems to be fine, except it end up breaking my JS.
It looks to me as soon as I initialize the DataTable it then breaks the JS on the page...
Thanks in Advance BMCC
回答1:
The mismatch in the number of header columns cause this issue, there should be equal number of header columns and the row columns. Or the mismatch "aoColumns" or "aoColumnDefs"
回答2:
I had this problem with the wrong index in the columnDefs:
"columnDefs": [
{ // set default column settings
"orderable": false,
"targets": [1, 2, 4]
}
]
Note that the targets specify the column index which start at 0. In my case I did not have a 5th column but I mentioned 4 index which was giving me the error.
回答3:
Check the number of columns set...
"aoColumns": [
null,
null,
{ "sType": "uk_date" },
{ "sType": "uk_date" },
null,
null
]
回答4:
I've the same issue and the solve is : you must send the data inside the table in tbody tag without let any column empty that u write in the thead tag
回答5:
You need to make sure that there are no extra tags opened. This error shows up when there is a tag mismatch, for example <th><tr> or <td>.
回答6:
I had this error when I called Datatable methods and I had 2 tables on the same page with the same id. So something like:
<table id="myTable"/>
...
<table id="myTable"/>
来源：https://stackoverflow.com/questions/37080190/datatable-breaks-nested-repeater-and-bootstrap