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

其他回答

供参考,数据表需要一个格式良好的表。它必须包含<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>

更多信息请点击这里

如果你有'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>

在我的例子中,这个错误的原因是我有两个具有相同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>

我在通过脚手架生成器创建的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!

我可能是由acolumns字段产生的。如上所述

aocolcolumns:如果指定了,则该数组的长度必须相等 到原始HTML表中的列数。在此处使用“null” 您希望只使用默认值并自动检测 选项。

然后必须像在Columns表中一样添加字段

...
aoColumnDefs: [
    null,
    null,
    null,
    { "bSortable": false },
    null,
],
...