Question

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

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

代码笔上的代码已更新（2/14/2018）以反映该解决方案，即如果一个或多个页面需要在单个页面上使用，则所有表都具有<thead>。

我们如何解决错误消息？

目标

.enable-dt元素内的所有表均应启用DataTable
我们正在尝试复制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。第一个表缺少thead。您将需要在第一个表中添加适当的thead。

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

正确格式化了DataTables的表引发错误

1 个答案: