logo标签列表

DataTable破坏了嵌套的Repeater和Bootstrap。

jquerytwitter-bootstrapdatatablesnested-repeater
8
我在使用DataTables和Nested Repeaters时遇到了问题。它基本上说我没有得到正确匹配的tr td标签。
但是，我已经按照下面链接中的Nested Repeater教程进行操作，并且对我来说HTML格式正确，当我检查DOM时一切似乎都很好。表格看起来像一个普通的表格，这让我感到困惑，为什么在初始化Datatble时会出现错误。 点击此处查看Nested Repearter教程示例。
然而，当我初始化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

7个回答
20

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

4
我的问题在于当我呈现没有数据的默认表格时，<td> </td> 数量不匹配。我只渲染了一个 <td> 和“空状态”下的消息。当我将 <td> 的数量与 <th> 相匹配后，问题解决了。 - Camilo Sanchez
2
那么我如何绘制具有colspan的单元格而不出现此问题？ - Paulo Madroñero
1
在我的应用程序中，表头列不同，我该如何解决这个问题？ - shivani
@PauloMadroñero 在调用 .datatable() 之前，请先检查您的列表大小。例如： if ([[${!objects?.isEmpty()}]]) { $('#datatable').DataTable(); } - Jefferson
5

我在columnDefs中使用了错误的索引，导致出现了问题：

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

请注意，targets 指定的是从 0 开始的列索引。在我的情况下，我没有第五列，但我提到了 4 索引，这导致出现错误。

2

检查设置的列数...

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

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

0
我有同样的问题，解决方法是： 必须将数据发送到tbody标签中的表格中，而不要让您在thead标签中编写的任何列为空。
0

我曾经遇到过同样的问题，所以我使用了CSS的display属性。

@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

-1

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

<table id="myTable"/> 
... 
<table id="myTable"/>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接