你必须去掉colspan, th和td的个数需要匹配。

发生这种情况的另一个原因是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>

对我来说，这个问题与上面给出的答案略有不同。对我来说，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>

除了不一致的数字之外，数据表脚本列部分中缺少的项目也会导致这种情况。修正这修正了我的数据表搜索栏。

我说的是这部分;

"columns": [
  null,
  .
  .
  .
  null
           ],

我在这个错误中苦苦挣扎，直到有人指出，这个部分的“null”比我的总人头数少一个。

我遇到了同样的错误，当试图添加colspan最后th

<table>
  <thead>
    <tr>    
      <th>&nbsp;</th> <!-- column 1 -->
      <th colspan="2">&nbsp;</th> <!-- column 2&3 -->
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

并通过在tr末尾添加隐藏列来解决它

<thead>
  <tr>    
    <th>&nbsp;</th> <!-- column 1 -->
    <th colspan="2">&nbsp;</th> <!-- column 2&3 -->

    <!-- hidden column 4 for proper DataTable applying -->
    <th style="display: none"></th> 
  </tr>
</thead>

<tbody>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>

    <!-- hidden column 4 for proper DataTable applying -->
    <td style="display: none"></td>
  </tr>
</tbody>

对此的解释是，由于某些原因，DataTable不能应用于colspan位于最后th的表，但可以应用于colspan位于任何中间th的表。

这个解决方案有点俗气，但比我找到的任何其他解决方案都更简单、更短。

我希望这能帮助到一些人。

我找到了一些“解决方案”。

这段代码不起作用:

<table>
<thead>
    <tr>
        <th colspan="3">Test</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody>

但这是可以的:

<table>
<thead>
    <tr>
        <th colspan="2">Test</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody>

我认为，问题是，最后一个TH不能有colspan属性。