javascript - 出现此错误 - 无法获取未定义或空引用的属性 'mData'

Question

当我使用 jQuery 数据表时出现以下错误。

错误:无法获取未定义或空引用的属性“mData”

代码

<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">

<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>

<script type="text/javascript">

    $(document).ready(function() {
           $('#empTable').DataTable();
    } );
</script>

<table id="empTable" class="display" width="100%">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
    </tr>
    <tr>
        <td>AAAAA</td>
        <td>32</td>
        <td>Colombo</td>
    </tr>
    <tr>
        <td>BBBBB</td>
        <td>29</td>
        <td>Kandy</td>
    </tr>
</table>

请建议我如何解决这个问题？

Answer 1

您的 html 结构不正确，您需要有一个 thead 元素，其中指定了标题，内容应该在 tbody 中。

$(document).ready(function() {
  $('#empTable').DataTable();
});

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.js"></script>

<table id="empTable" class="display" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>K.Senthuran</td>
      <td>32</td>
      <td>42nd Lane</td>
    </tr>
    <tr>
      <td>S.Senthuran</td>
      <td>29</td>
      <td>Hampden Lane</td>
    </tr>
  </tbody>
</table>