8

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

然而，我已经按照下面链接中的嵌套中继器教程进行操作，对我来说，HTML 格式正确，当我检查 DOM 时，一切似乎都很好。该表看起来像一个普通表，这让我很困惑，为什么在我初始化 Datatble 时它会中断。

单击此处查看嵌套中继器教程示例。

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

未捕获的类型错误：无法设置未定义的属性“_DT_CellIndex”


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>

这是初始化数据表的代码：

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

4

7 回答 7

17

标题列数不匹配导致此问题，标题列数和行列数应相等。或不匹配的“aoColumns”或“aoColumnDefs”

于 2016-07-08T08:36:59.733 回答
5

我在 columnDefs 中的索引错误时遇到了这个问题：

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

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

于 2017-05-11T20:19:02.573 回答
2

检查设置的列数...

"aoColumns": [
    null,
    null,
    { "sType": "uk_date" },
    { "sType": "uk_date" },
    null,
    null
]
于 2017-09-29T13:09:49.503 回答
0

我有同样的问题，解决方法是：您必须在 tbody 标记中发送表内的数据，而不要让您在 thead 标记中写入的任何列为空

于 2019-07-30T14:46:05.560 回答
0

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

于 2020-04-08T07:57:57.223 回答
0

我有同样的问题，所以我使用了 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

于 2021-11-22T09:15:58.607 回答
-1

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

<table id="myTable"/> 
... 
<table id="myTable"/>
于 2018-01-24T20:53:46.540 回答