我对数据表有一个问题。我也浏览了这个链接，但没有任何结果。我已经包括了将数据直接解析到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]
}],
});
});
对我来说，这个问题与上面给出的答案略有不同。对我来说，HTML标记很好，但是javascript中的一列缺失了，并且与HTML不匹配。
i.e.
<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>
发生这种情况的另一个原因是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
<table>
<thead>
<tr>
<th> </th> <!-- column 1 -->
<th colspan="2"> </th> <!-- column 2&3 -->
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
并通过在tr末尾添加隐藏列来解决它
<thead>
<tr>
<th> </th> <!-- column 1 -->
<th colspan="2"> </th> <!-- column 2&3 -->
<!-- hidden column 4 for proper DataTable applying -->
<th style="display: none"></th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<!-- hidden column 4 for proper DataTable applying -->
<td style="display: none"></td>
</tr>
</tbody>
对此的解释是，由于某些原因，DataTable不能应用于colspan位于最后th的表，但可以应用于colspan位于任何中间th的表。
这个解决方案有点俗气，但比我找到的任何其他解决方案都更简单、更短。
我希望这能帮助到一些人。
如果你有'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>
