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

Question

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

错误：无法获取未定义或空引用的属性 '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 元素，其中指定了 header 并且内容应该在 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>

Answer 2

$(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>

Answer 3

HTML 中的结构 table 需要匹配。例如，<thead> 中的 <th> 标签与 <tbody> 中的 <tr> 标签。也就是说，如果在 table 中您期望有 5 列，则 table 标题中应该有 5 个 <th> 标签，table 中应该有 5 个 <tr> 标签 body。

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

Getting this error - Unable to get property 'mData' of undefined or null reference

javascript

jquery

datatables

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