DataTable breaks Nested Repeater and Bootstrap
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
Answer
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"