我和Datatables
有问题。我也经历了this link,它没有给我任何结果。我已经包含了将数据直接解析到DOM中的所有先决条件。请帮我解决这个问题。
脚本
$(document).ready(function() {
$('.viewCentricPage .teamCentric').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bPaginate": false,
"bFilter": true,
"bSort": true,
"aaSorting": [
[1, "asc"]
],
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [0]
}, {
"bSortable": true,
"aTargets": [1]
}, {
"bSortable": false,
"aTargets": [2]
}],
});
});
FYI dataTables需要一个结构良好的表格。它必须包含<thead>
和<tbody>
标签,否则会抛出此错误。还要检查以确保包括标题行在内的所有行都具有相同的列数。
以下将抛出错误(没有<thead>
和<tbody>
标签)
<table id="sample-table">
<tr>
<th>title-1</th>
<th>title-2</th>
</tr>
<tr>
<td>data-1</td>
<td>data-2</td>
</tr>
</table>
以下也会抛出错误(列数不等)
<table id="sample-table">
<thead>
<tr>
<th>title-1</th>
<th>title-2</th>
</tr>
</thead>
<tbody>
<tr>
<td>data-1</td>
<td>data-2</td>
<td>data-3</td>
</tr>
</tbody>
</table>
有关更多信息read more here
从上面给出的答案来看,我的问题略有不同。对我来说,HTML标记很好,但我在javascript中的一个列丢失了,并且与html不匹配。
即
<td>, <tr>
我的剧本: -
<table id="companies-index-table" class="table table-responsive-sm table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Created at</th>
<th>Updated at</th>
<th>Count</th>
</tr>
</thead>
<tbody>
@foreach($companies as $company)
<tr>
<td>{{ $company->id }}</td>
<td>{{ $company->name }}</td>
<td>{{ $company->created_at }}</td>
<td>{{ $company->updated_at }}</td>
<td>{{ $company->count }}</td>
</tr>
@endforeach
</tbody>
</table>
我有一个动态生成但形状错误的表格,其中包含拼写错误。我错误地在另一个<script>
$(document).ready(function() {
$('#companies-index-table').DataTable({
serverSide: true,
processing: true,
responsive: true,
ajax: "{{ route('admincompanies.datatables') }}",
columns: [
{ name: 'id' },
{ name: 'name' },
{ name: 'created_at' },
{ name: 'updated_at' }, <-- I was missing this line so my columns didn't match the thead section.
{ name: 'count', orderable: false },
],
});
});
</script>
中复制了一个<td>
标签。我的列数匹配。我有<td>
和<thead>
标签。一切都匹配,除了这个小错误,我没有注意到一段时间,因为我的专栏中有很多链接和图像标签。
我遇到了同样的问题,但我正在动态生成表。在我的情况下,我的表缺少<tbody>
和<thead>
标签。
这是我的代码片段,如果它帮助了某人
<tbody>
在我的情况下,并使用ASP.NET GridView,UpdatePanel和DropDownList(使用选择插件,我使用Javascript线将值重置为零),我收到此错误并尝试了几天没有希望。问题是我的代码背后的代码如下所示,当我选择一个值两次以将其操作应用于选定的网格行时,我得到了该错误。我想好几天这是一个Javascript问题(再次,在我的情况下),最后修复为更新过程的drowpdown值给出零:
//table string
var strDiv = '<table id="tbl" class="striped center responsive-table">';
//add headers
var strTable = ' <thead><tr id="tableHeader"><th>Customer Name</th><th>Customer Designation</th><th>Customer Email</th><th>Customer Organization</th><th>Customer Department</th><th>Customer ContactNo</th><th>Customer Mobile</th><th>Cluster Name</th><th>Product Name</th><th> Installed Version</th><th>Requirements</th><th>Challenges</th><th>Future Expansion</th><th>Comments</th></tr> </thead> <tbody>';
//add data
$.each(data, function (key, GetCustomerFeedbackBE) {
strTable = strTable + '<tr><td>' + GetCustomerFeedbackBE.StrCustName + '</td><td>' + GetCustomerFeedbackBE.StrCustDesignation + '</td><td>' + GetCustomerFeedbackBE.StrCustEmail + '</td><td>' + GetCustomerFeedbackBE.StrCustOrganization + '</td><td>' + GetCustomerFeedbackBE.StrCustDepartment + '</td><td>' + GetCustomerFeedbackBE.StrCustContactNo + '</td><td>' + GetCustomerFeedbackBE.StrCustMobile + '</td><td>' + GetCustomerFeedbackBE.StrClusterName + '</td><td>' + GetCustomerFeedbackBE.StrProductName + '</td><td>' + GetCustomerFeedbackBE.StrInstalledVersion + '</td><td>' + GetCustomerFeedbackBE.StrRequirements + '</td><td>' + GetCustomerFeedbackBE.StrChallenges + '</td><td>' + GetCustomerFeedbackBE.StrFutureExpansion + '</td><td>' + GetCustomerFeedbackBE.StrComments + '</td></tr>';
});
//add end of tbody
strTable = strTable + '</tbody></table>';
//insert table into a div
$('#divCFB_D').html(strDiv);
$('#tbl').html(strTable);
//finally add export buttons
$('#tbl').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
这是我的错:
private void ddlTasks_SelectedIndexChanged(object sender, System.EventArgs e)
{
if (ddlTasks.SelectedValue != 0) {
ChangeStatus(ddlTasks.SelectedValue);
ddlTasks.SelectedValue = "0"; //// **This fixed my issue**
}
dvItemsGrid.DataSource = CreateDatasource();
dvItemsGrid.DataBind();
dvItemsGrid.UseAccessibleHeader = true;
dvItemsGrid.HeaderRow.TableSection = TableRowSection.TableHeader;
}
除了不一致和数字之外,datatable脚本列部分中缺少的项也可能导致这种情况。纠正修复我的数据表搜索栏。
我在说这部分;
$('#<%= DropDownList.ClientID%>').val('0').trigger("chosen:updated").chosen();
我一直在努力解决这个错误,直到我指出这个部分比我的总数还少一个“空”。
这个让我疯狂 - 如何在.NET MVC视图中成功呈现DataTable。这有效:
"columns": [
null,
.
.
.
null
],
JS文件中的脚本:
**@model List<Student>
@{
ViewData["Title"] = "Index";
}
<h2>NEW VIEW Index</h2>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
@foreach (var element in Model)
{
<tr>
<td>@Html.DisplayFor(m => element.ID)</td>
<td>@Html.DisplayFor(m => element.FirstName)</td>
<td>@Html.DisplayFor(m => element.LastName)</td>
</tr>
}
</tbody>
</table>**
您需要在**$(document).ready(function () {
$('#example').DataTable();
});**
中为行标题包装行,并为行添加<thead>
。还要确保你有匹配的号码。列标题<tbody>
和<th>
一样
我可能是由aoColumns字段引起的。如此处所述
aoColumns:如果指定,则此数组的长度必须等于原始HTML表中的列数。如果您只希望使用默认值和自动检测的选项,请使用“null”。
然后,您必须添加表格列中的字段
td
我找到了一些“解决方案”。
此代码不起作用:
...
aoColumnDefs: [
null,
null,
null,
{ "bSortable": false },
null,
],
...
但这没关系:
<table>
<thead>
<tr>
<th colspan="3">Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
我认为,问题是,最后的TH不能有属性colspan。
Cannot read property 'fnSetData' of undefined
的一个常见原因是列数不匹配,就像在这个错误的代码中一样:
<thead> <!-- thead required -->
<tr> <!-- tr required -->
<th>Rep</th> <!-- td instead of th will also work -->
<th>Titel</th>
<!-- th missing here -->
</tr>
</thead>
<tbody>
<tr>
<td>Rep</td>
<td>Titel</td>
<td>Missing corresponding th</td>
</tr>
</tbody>
虽然以下代码每个<th>
有一个<td>
(列数必须匹配),但有效:
<thead>
<tr>
<th>Rep</th> <!-- 1st column -->
<th>Titel</th> <!-- 2nd column -->
<th>Added th</th> <!-- 3rd column; th added here -->
</tr>
</thead>
<tbody>
<tr>
<td>Rep</td> <!-- 1st column -->
<td>Titel</td> <!-- 2nd column -->
<td>th now present</td> <!-- 3rd column -->
</tr>
</tbody>
当使用结构良好的thead和colspan但没有第二行时,也会出现错误。
对于包含7个列的表,以下内容不起作用,我们在javascript控制台中看到“无法读取未定义的属性'mData':
<thead>
<tr>
<th>Rep</th>
<th>Titel</th>
<th colspan="5">Download</th>
</tr>
</thead>
虽然这有效:
<thead>
<tr>
<th rowspan="2">Rep</th>
<th rowspan="2">Titel</th>
<th colspan="5">Download</th>
</tr>
<tr>
<th>pdf</th>
<th>nwc</th>
<th>nwctxt</th>
<th>mid</th>
<th>xml</th>
</tr>
</thead>
我在通过脚手架生成器创建的Rails视图中使用DOM数据时遇到了同样的问题。默认情况下,视图省略了最后三列(包含显示,隐藏和销毁记录的链接)的<th>
元素。我发现,如果我在<th>
中的<thead>
元素中为这些列添加了标题,那就解决了问题。
我不能说这是否是你遇到的同样的问题,因为我看不到你的HTML。如果它不是同一个问题,你可以使用chrome调试器通过单击控制台中的错误(这将带你到它失败的代码)来确定它出错的列,然后添加一个条件断点(在col==undefined
)。当它停止时,您可以检查变量i
以查看它当前所在的列,这可以帮助您找出与其他列不同的列。希望有所帮助!
如果你有'aoColumns':[..]
之类的表参数与正确的列数不匹配,也会发生这种情况。当从其他页面复制粘贴代码以快速启动数据集合时,通常会出现这样的问题。
例:
这不起作用:
<table id="dtable">
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
</thead>
<tbody>
<td>data 1</td>
<td>data 2</td>
</tbody>
</table>
<script>
var dTable = $('#dtable');
dTable.DataTable({
'order': [[ 1, 'desc' ]],
'aoColumns': [
null,
null,
null,
null,
null,
null,
{
'bSortable': false
}
]
});
</script>
但这会奏效:
<table id="dtable">
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
</thead>
<tbody>
<td>data 1</td>
<td>data 2</td>
</tbody>
</table>
<script>
var dTable = $('#dtable');
dTable.DataTable({
'order': [[ 0, 'desc' ]],
'aoColumns': [
null,
{
'bSortable': false
}
]
});
</script>
发生这种情况的另一个原因是因为DataTable初始化中的columns参数。
列数必须与标题匹配
"columns" : [ {
"width" : "30%"
}, {
"width" : "15%"
}, {
"width" : "15%"
}, {
"width" : "30%"
} ]
我有7列
<th>Full Name</th>
<th>Phone Number</th>
<th>Vehicle</th>
<th>Home Location</th>
<th>Tags</th>
<th>Current Location</th>
<th>Serving Route</th>
你必须删除你的colspan
和th
和td
需要匹配的数量。
在我的情况下,如果我使用没有标题的表,则会出现此错误
<thead>
<tr>
<th>example</th>
</tr>
</thead>
<thead>
和<tbody>
与<th>
和<td>
的数量相同,解决了我的问题。
提示1:
请参阅此链接,您会得到一些想法:
提示2:
检查以下是否正确:
<thead></thead>
和<tbody></tbody>
标签style='display:none'
问题