DataTable 打破嵌套中继器和 Bootstrap

Question

我运行遇到了数据表和嵌套中继器的问题。它基本上说我没有得到正确匹配的 tr td 标签。

然而，我遵循了下面 link 中的嵌套中继器教程，对我来说 HTML 的格式正确，当我检查 DOM 时，一切似乎都正确没事的。 table 看起来像一个普通的 table，这让我很困惑，为什么当我初始化 Datatble 时它会崩溃。

Click here to see the Nested Repearter Tutorial Example.

它看起来但是，当我初始化 DataTable (#TeamDashboard) 时，出现此错误：

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>

这是初始化 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 }]
});

有谁知道我哪里出错了？一切似乎都很好，除了它最终破坏了我的 JS。

在我看来，一旦我初始化 DataTable，它就会破坏页面上的 JS...

提前致谢 BMCC

Answer 1

header 列的数量不匹配导致了这个问题，header 列和行列的数量应该相等。或者不匹配 "aoColumns" 或 "aoColumnDefs"

Answer 2

我在 columnDefs 中遇到错误索引的问题：

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

请注意，targets 指定从 0 开始的列索引。在我的例子中，我没有第 5 列，但我提到了 4 索引，这给了我错误。

Answer 3

检查设置的列数...

"aoColumns": [
    null,
    null,
    { "sType": "uk_date" },
    { "sType": "uk_date" },
    null,
    null
]

Answer 4

我在调用 Datatable 方法时遇到此错误，并且我在同一页面上有 2 个具有相同 ID 的表。所以像：

<table id="myTable"/> 
... 
<table id="myTable"/>

Answer 5

我遇到了同样的问题，解决办法是：您必须在 tbody 标签 table 内发送数据，不要让您在 thead 标签

中写入的任何列为空

Answer 6

您需要确保没有打开额外的标签。当标签不匹配时会出现此错误，例如 <th><tr> 或 <td>.

Answer 7

我有同样的问题，所以我使用 CSS 的显示属性。

@if( Str::startsWith($value, 'image/') )
<td style="display: none" ></td>
<td style="display: none"></td>
@else
    <td>{!! ucwords(str_replace('_', ' ', $field)) !!}</td> 
    <td>
        @if($value == '0')
        No
        @elseif($value == '1')
        Yes
        @else
        {{ $value }}
        @endif
    </td>   
@endif

DataTable 打破嵌套中继器和 Bootstrap

DataTable breaks Nested Repeater and Bootstrap

jquery

datatables

nested-repeater

twitter-bootstrap