web-dev-qa-db-fra.com

DataTable rompt le répéteur imbriqué et le bootstrap

J'ai rencontré un problème avec DataTables et Nested Repeaters. En gros, cela signifie que je n'ai pas obtenu les balises Tr td correspondantes. 

Pourtant, j'ai suivi le tutoriel du répétiteur imbriqué à partir du lien ci-dessous et que le code HTML est correctement formé et que je vérifie le DOM et que tout semble bien se passer. La table ressemble à une table normale, ce qui me prive alors de la raison pour laquelle elle se casse lorsque j'initialise le fichier de données.

Cliquez ici pour voir l'exemple du didacticiel imbriqué Repearter .

Il semble cependant que lorsque j'initialise le DataTable (#TeamDashboard) j'obtienne cette erreur: 

 Uncaught TypeError: impossible de définir la propriété '_DT_CellIndex' de non définie 


 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>

C'est le code pour l'initialisation du 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 }]
});

Est-ce que quelqu'un sait où je me suis trompé? Tout semble aller pour le mieux, sauf que ça finit par casser mon JS.

Il me semble que dès que j'initialise le DataTable, il casse le JS de la page ...

Merci d'avance BMCC

jquerytwitter-bootstrapdatatablesnested-repeater
4
bmcc81

Ce problème est dû à la non concordance du nombre de colonnes d’en-tête, il doit y avoir un nombre égal de colonnes d’en-tête et de colonnes de lignes.

9
user3397383

J'ai eu ce problème avec le mauvais index dans le columnDefs:

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

Notez que la variable targets spécifie l'index de colonne qui commence à 0. Dans mon cas, je n'avais pas de cinquième colonne, mais j'ai mentionné 4 index qui me donnait l'erreur.

4
Raghavendra N

Vérifiez le nombre de colonnes définies ... "aoColumns": [ null, null, { "sType": "uk_date" }, { "sType": "uk_date" }, null, null ]

1
Abin Abraham