DataTable 打破了嵌套中继器和引导程序
Posted
技术标签:
【中文标题】DataTable 打破了嵌套中继器和引导程序【英文标题】：DataTable breaks Nested Repeater and Bootstrap 【发布时间】：2016-09-01 23:42:57 【问题描述】：我遇到了数据表和嵌套中继器的问题。它基本上说我没有得到正确匹配的 tr td 标签。
然而，我已经按照下面链接中的嵌套中继器教程进行操作，对我来说，html 格式正确，当我检查 DOM 时，一切似乎都很好。该表看起来像一个普通表，这让我很困惑，为什么在我初始化 Datatble 时它会中断。
Click here to see the Nested Repearter Tutorial Example.
看起来但是，当我初始化 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>
这是初始化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
【问题讨论】：
【参考方案1】：标题列数不匹配导致此问题，标题列数和行列数应相等。 或者不匹配的“aoColumns”或“aoColumnDefs”
【讨论】：
我的问题是当我呈现没有数据的默认表时，<td> </td> 的数量不匹配。我只是渲染 1 <td> 和“空状态”的消息。一旦我将相同数量的<td> 与<th> 的数量匹配，我就解决了这个问题。
那么如何使用 colspan 绘制单元格而不出现此问题？
在我的应用程序中，标题列不一样，我该如何解决这个问题
@PauloMadroñero 只需在调用 .datatable() 之前检查您的列表大小。例如： if ([[$!objects?.isEmpty()]]) $('#datatable').DataTable(); 【参考方案2】：
我在 columnDefs 中的索引错误时遇到了这个问题：
"columnDefs": [
// set default column settings
"orderable": false,
"targets": [1, 2, 4]
]
请注意，targets 指定从 0 开始的列索引。在我的情况下，我没有第 5 列，但我提到了4 索引，这给了我错误。
【讨论】：
【参考方案3】：检查设置的列数...
"aoColumns": [
null,
null,
"sType": "uk_date" ,
"sType": "uk_date" ,
null,
null
]
【讨论】：
【参考方案4】：我有同样的问题，解决方法是： 您必须在 tbody 标记中发送表内的数据，而不要让您在 thead 标记中写入的任何列为空
【讨论】：
【参考方案5】：您需要确保没有打开额外的标签。当标签不匹配时会出现此错误，例如<th><tr> 或<td>。
【讨论】：
【参考方案6】：我遇到了同样的问题，所以我使用了 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【讨论】：
【参考方案7】：当我调用 Datatable 方法并且我在同一页面上有 2 个具有相同 ID 的表时，我遇到了这个错误。所以像：
<table id="myTable"/>
...
<table id="myTable"/>
【讨论】：
以上是关于DataTable 打破了嵌套中继器和引导程序的主要内容，如果未能解决你的问题，请参考以下文章