Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 732
bmcc81 Avatar asked May 06 '16 19:05

bmcc81


2 Answers

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"

like image 132
user3397383 Avatar answered Nov 19 '22 10:11

user3397383


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.

like image 5
Raghavendra N Avatar answered Nov 19 '22 12:11

Raghavendra N