DataTable打破了嵌套中继器和引导程序 [英] DataTable breaks Nested Repeater and Bootstrap
问题描述
我遇到了DataTables和嵌套转发器的问题.它基本上说我没有得到正确的匹配tr td标签.
I've run into a issue with DataTables and Nested Repeaters. It basically says that I haven't gotten the correct matching tr td tags.
但是，我遵循下面的链接中的Nested Repeater教程，对我来说HTML格式正确，当我检查DOM时，一切似乎都很好.该表看起来像一个普通表，然后使我感到困惑，这是为什么初始化Datatble时它会中断的原因.
Yet, I've followed the Nested Repeater tutorial from the link below and to me that the HTML is formed correctly and when I check the DOM and everything seems to be fine. The table looks like a normal table, which then confuses my as top why it's breaking when I initialize the Datatble.
看起来，但是，当我初始化DataTable(#TeamDashboard)时，出现此错误:
It looks However, when I initialize the DataTable (#TeamDashboard) I get this error:
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的代码:
This is the code for the initializing the 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.
Does anyone know where I've gone wrong? Everything seems to be fine, except it end up breaking my JS.
在我初始化DataTable之后，它立即对我产生了干扰，然后破坏了页面上的JS ...
It looks to me as soon as I initialize the DataTable it then breaks the JS on the page...
预先感谢 BMCC
推荐答案
标题列数量不匹配会导致此问题，标题列和行列的数量应相等. 或不匹配的"aoColumns"或"aoColumnDefs"
The mismatch in the number of header columns cause this issue, there should be equal number of header columns and the row columns. Or the mismatch "aoColumns" or "aoColumnDefs"
这篇关于DataTable打破了嵌套中继器和引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
