Jquery 无法读取属性';mData';将DataTables与colspan一起使用时的未定义值
我正在使用datatables显示来自服务器的数据。问题是我一直在控制台中收到一个错误,它说:Jquery 无法读取属性';mData';将DataTables与colspan一起使用时的未定义值,jquery,datatables,Jquery,Datatables,我正在使用datatables显示来自服务器的数据。问题是我一直在控制台中收到一个错误,它说: datatables.min.js:145未捕获类型错误:无法读取未定义的属性“mData” 我已经访问了互联网上与此相关的每一个链接,但对我来说没有任何效果 我已使用colspans确保thead和tbody中的列数相同 我可能遗漏了一些东西,但在花了相当长的时间之后,我会感谢您的帮助 下面是代码的样子 HTML: 这些问题的一般原因是 页眉列和页脚列之间不匹配 正文元素与标题不匹配(一行中的td数
datatables.min.js:145未捕获类型错误:无法读取未定义的属性“mData”
我已经访问了互联网上与此相关的每一个链接,但对我来说没有任何效果
我已使用colspans确保thead和tbody中的列数相同
我可能遗漏了一些东西,但在花了相当长的时间之后,我会感谢您的帮助
下面是代码的样子
HTML:
这些问题的一般原因是
匹配)在您的情况下,请将页眉(如社会分类号等)从
移动到
,并且您的页眉和页脚不匹配。请使它们相同,因为我看到页眉中有4个元素,页脚中只有3个元素。也有此错误,在我的情况下,是由于列页眉的数量与正文中的列不匹配造成的 我的团队遇到了类似的问题,我们可以通过从
和
标记中删除所有colspan、style和class属性来解决
因此,作为起点,我建议删除这些属性。
此外,我认为您的
tfoot
标记也可能导致一些问题。最好先删除它们,然后查看。确保标签像。。。t车身使用是否正确
祝您好运您是否检查了表的重复id,因为在我的情况下,它导致了相同的问题..是的,我刚刚再次检查,似乎不是原因。可能是colspan的问题。请将页眉(如社会分类号等)从移动到,并且页眉和页脚不匹配。请使它们相同,因为我看到页眉中有4个元素,页脚中只有3个元素。页脚有一个元素带有colspan=“2”,以弥补缺少的部分。我按照你的建议把东西搬到了thead,它成功了。奇怪!我还是不知道为什么。谢谢,还有一件事,当我使用导出到excel工具时,它不会捕获第一个标题。你以前用过那个工具吗?这不是答案
<table id="data-table" class="display table" width="100%">
<thead>
<tr>
<th colspan="4" class="center-align solid-left-border" style="border-bottom: none; text-decoration: underline; text-transform: uppercase; padding: 5px 18px;">
Tier 2 Contributions Report
</th>
</tr>
<tr>
<th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; font-weight: normal; padding: 5px 18px; font-size: 12.5px">
Employer's FIle No/Registration No:
</th>
<th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;">
<%= company.getSSNITRegistration() || '-' %>
</th>
</tr>
<tr>
<th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; padding: 5px 18px; font-size: 12.5px;">
Name of Employer:
</th>
<th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;">
<%= company.getName() || '-' %>
</th>
</tr>
<tr>
<th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; padding: 5px 18px; font-size: 12.5px;">
Address of Employer:
</th>
<th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;">
<%= company.getAddress() || '-' %>
</th>
</tr>
<tr>
<th colspan="4" style="border-bottom: none;"></th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="2" class="left-align">Totals</th>
<th class="center-align"><%= addCommas(totals.basicSalary) %></th>
<th class="right-align"><%= addCommas(totals.contribution) %></th>
</tr>
</tfoot>
<tbody>
<tr>
<th class="left-align">Social Sec. No.</th>
<th class="left-align">Full Name</th>
<th class="center-align">Basic Salary</th>
<th class="right-align">Contribution (5%)</th>
</tr>
<% employees.forEach(function(employee) { %>
<tr>
<td class="left-align"><%= employee.ssnitNumber %></td>
<td class="left-align"><%= employee.lastName + ', ' + employee.firstName + ' ' + employee.otherNames%></td>
<td class="center-align"><%= addCommas(employee.basicSalary) %></td>
<td class="right-align"><%= addCommas(employee.contribution) %></td>
</tr>
<% }) %>
</tbody>
</table>
$('#data-table').DataTable( {
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": false,
"bInfo": true,
"bAutoWidth": false,
"dom": 'Bfrtip',
"buttons": [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});