jQuery 数据表打破嵌套中继器和引导程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37080190/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DataTable breaks Nested Repeater and Bootstrap
提问by bmcc81
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.
我遇到了 DataTables 和 Nested Repeaters 的问题。它基本上说我没有得到正确匹配的 tr td 标签。
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.
然而，我从下面的链接中遵循了嵌套中继器教程，对我来说 HTML 格式正确，当我检查 DOM 时，一切似乎都很好。该表看起来像一个普通的表，这让我感到困惑，为什么在我初始化 Datatble 时它会损坏。
Click here to see the Nested Repearter Tutorial Example.
It looks However, when I initialize the DataTable (#TeamDashboard) I get this error:
看起来但是，当我初始化 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>
This is the code for the initializing the DataTable:
这是初始化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 }]
});
Does anyone know where I've gone wrong? Everything seems to be fine, except it end up breaking my JS.
有谁知道我哪里出错了？一切似乎都很好，除了它最终破坏了我的 JS。
It looks to me as soon as I initialize the DataTable it then breaks the JS on the page...
在我初始化 DataTable 后，它看起来会立即破坏页面上的 JS ......
Thanks in Advance BMCC
提前致谢 BMCC
回答by user3397383
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"
标题列数不匹配导致此问题，标题列数和行列数应相等。或者不匹配的“aoColumns”或“aoColumnDefs”
回答by Raghavendra N
I had this problem with the wrong index in the columnDefs:
我在 columnDefs 中的索引错误时遇到了这个问题：
"columnDefs": [
{ // set default column settings
"orderable": false,
"targets": [1, 2, 4]
}
]
Note that the targetsspecify the column index which start at 0. In my case I did not have a 5th column but I mentioned 4index which was giving me the error.
请注意，targets指定从 0 开始的列索引。在我的情况下，我没有第 5 列，但我提到了4给我错误的索引。
回答by Abin Abraham
Check the number of columns set...
检查设置的列数...
"aoColumns": [
null,
null,
{ "sType": "uk_date" },
{ "sType": "uk_date" },
null,
null
]
回答by Mahmoud Abbas
I've the same issue and the solve is : you must send the data inside the table in tbody tag without let any column empty that u write in the thead tag
我有同样的问题，解决方法是：您必须在 tbody 标签中发送表内的数据，而不要让您在 thead 标签中写入的任何列为空
回答by Shubham Nayak
You need to make sure that there are no extra tags opened. This error shows up when there is a tag mismatch, for example <th><tr>or <td>.
您需要确保没有打开额外的标签。当标签不匹配时会出现此错误，例如<th><tr>或<td>。
回答by Ryan Shillington
I had this error when I called Datatable methods and I had 2 tables on the same page with the same id. So something like:
当我调用 Datatable 方法时出现此错误，并且我在同一页面上有 2 个具有相同 ID 的表。所以像：
<table id="myTable"/>
...
<table id="myTable"/>
