我对数据表有一个问题。我也浏览了这个链接,但没有任何结果。我已经包括了将数据直接解析到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]
    }],
  });
});

当前回答

在我的例子中,这个错误的原因是我有两个具有相同id名称但表结构不同的表,因为我习惯复制-粘贴表代码。请确保每张桌子有不同的id。

<table id="tabel_data"> <thead> <tr> <th>heading 1</th> <th>heading 2</th> <th>heading 3</th> <th>heading 4</th> <th>heading 5</th> </tr> </thead> <tbody> <tr> <td>data-1</td> <td>data-2</td> <td>data-3</td> <td>data-4</td> <td>data-5</td> </tr> </tbody> </table> <table id="tabel_data"> <thead> <tr> <th>heading 1</th> <th>heading 2</th> <th>heading 3</th> </tr> </thead> <tbody> <tr> <td>data-1</td> <td>data-2</td> <td>data-3</td> </tr> </tbody> </table>

其他回答

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

我在通过脚手架生成器创建的Rails视图中使用DOM数据时遇到了同样的问题。默认情况下,视图为最后三列(包含显示、隐藏和销毁记录的链接)省略<th>元素。我发现,如果我在<thead>内的<th>元素中为这些列添加标题,它就解决了这个问题。

I can't say if this is the same problem you're having since I can't see your html. If it is not the same problem, you can use the chrome debugger to figure out which column it is erroring out on by clicking on the error in the console (which will take you to the code it is failing on), then adding a conditional breakpoint (at col==undefined). When it stops you can check the variable i to see which column it is currently on which can help you figure out what is different about that column from the others. Hope that helps!

无法读取未定义的属性'fnSetData'的常见原因是列数不匹配,就像下面的错误代码:

<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>

下面的代码中,每<td>(列数必须匹配)包含一个<th>:

<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>

当使用带有colspan但没有第二行的格式良好的标题时,也会出现这种错误。

对于一个有7列的表,下面的不工作,我们看到“不能读取属性'mData' of undefined”在javascript控制台中:

<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>

我得到一个类似的错误。问题是标题行不正确。当我执行下面的标题行时,我遇到的问题得到了解决。

<table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
    <tr>
                <th colspan="6">Common Title</th>
            </tr>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
</tbody>
</table>

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