javascript - 如何使用 html 修复表上的 JQuery DataTables mData 错误

Question

我使用以下 HTML 表使用 jquery 数据表进行分页

<table class="table table-responsive dataTable" id="products-table">
    <thead>
        <tr><th>Image</th>
        <th>Code</th>
        <th>Weight</th>
        <th>Jarti</th>
        <th>Wages</th>
        <th>Amount</th>
        <th class="no-sort">Status</th>
        <th colspan="3" class="no-sort">Action</th>
    </tr></thead>
    <tbody>
            <tr>
            <td>
                 <img src="/images/designs/4.JPG" style="width:120px;" class="img img-responsive" alt="Gold Ring">
            </td>
            <td>RRS</td>
            <td>0.00000</td>
            <td>0.00000</td>
            <td>0.00000</td>
            <td>0.00000</td>
            <td>
                  <span for="" class="label label-warning">In Progress</span>
            </td>
            <td></td>
            <td>
                <form method="POST" action="/products/3" accept-charset="UTF-8"><input name="_method" type="hidden" value="DELETE"><input name="_token" type="hidden" value="5fkON57zDrYwdBZjL5PHjNfi1cgFQhkTg5laynQ6">
                <div class="btn-group">
                    <a href="/products/3" class="btn btn-default btn-xs"><i class="glyphicon glyphicon-eye-open"></i></a>
                    <a href="/products/3/edit" class="btn btn-default btn-xs"><i class="glyphicon glyphicon-edit"></i></a>
                    <button type="submit" class="btn btn-danger btn-xs" onclick="return confirm('Are you sure?')"><i class="glyphicon glyphicon-trash"></i></button>
                </div>
                </form>
            </td>
        </tr>
        </tbody>
</table>

这里，这个表有 HTML 标签。我使用以下 JS 进行分页:

$('.table').DataTable();

在实现上述 JS 时，我遇到错误:

Cannot read property 'mData' of undefined

我该如何解决这个问题？任何帮助/建议都会有帮助

Answer 1

您的 jQuery DataTables HTML 标记无效。

首先，表体中的每一列在表头中至少应有一列，参见complex header example 。您需要删除 colspan 并将其替换为单独的 th 元素，或者为正文中的每一列添加另一行带有 th 元素的标题列.

其次，标题列数 (10) 和正文中的列数 (9) 不匹配。

作为旁注，我会避免通过类名 .table 初始化 DataTables，并使用元素 id #products-table 以防您有其他具有相同类的表您不想初始化为 DataTable。

参见corrected example用于代码和演示。