DataTables 的格式正确的表抛出错误

Question

我们正在使用Datatables Bootstrap 4 库来格式化我们的表格。即使我们有正确格式化的表格，在页面加载后我们仍然会收到以下错误消息。

我在下面添加了 JS 和 HTML，但代码也可以在 codepen.io 上找到。

• codepen 上的代码已更新（2018 年 2 月 14 日）以反映解决方案，即如果一个或多个表在单个页面上需要它，则所有表都具有 <thead>。

我们如何解决错误信息？

目标

1. .enable-dt 元素内的所有表都应启用DataTable
2. 我们正在尝试复制 Multiple tables 功能。

无法读取未定义的属性“mData”

JavaScript

$(function () {
    $('.enable-dt table').addClass('table table-striped table-bordered nowrap');
    $('.enable-dt table').DataTable({
        'paging': false,
        'searching': false,
    });
});

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" media="all">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" media="all">
<div class="enable-dt">
    <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" defer=""></script>
    <script src="//cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js" defer=""></script>
    <table border="1" cellpadding="1" cellspacing="1">
        <tbody>
            <tr>
                <td>Synergistically envisioneer.</td>
            </tr>
            <tr>
                <td>Continually utilize client-focused.</td>
            </tr>
            <tr>
                <td>Conveniently procrastinate</td>
            </tr>
        <tbody>
    </table>
    <table border="1" cellpadding="1" cellspacing="1">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Completely architect.</td>
                <td>Quickly incubate global</td>
            </tr>
            <tr>
                <td>Seamlessly transform.</td>
                <td>ethical e-services</td>
            </tr>
            <tr>
                <td>Efficiently develop customer directed</td>
                <td>high-yield users</td>
            </tr>
        <tbody>
    </table>
</div>

Answer 1

编辑：

根据 OP 更新，数据表的正确表格式要求每个表都有一个表头。第一张桌子缺少标题。您需要将适当的标题添加到第一个表中。

    <thead>
        <tr>
            <th>Column Header</th>
        </tr>
    </thead>