DataTable breaks Nested Repeater

bmcc81

Hi,

I'm trying to get my repeater working with 1 nested repeater inside to work.

It seems to break when I initialize the DataTable.

I get this error:
Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
jquery.dataTables.min.js?v=6754017259857097728:24

[code]
<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>

'><%# DataBinder.Eval(Container.DataItem, "Status") %>

</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>

[/code]

[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": '<"top"i>rt<"bottom"flp><"clear">', // This flips the filters and pagination tpo where we want it, some JQ stil needed to position
"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]

allan

Looks like a cross post. Closing this discussion in favour of the other one with my reply asking for a link to a test case there.

Allan