数据表:无法读取未定义的属性"mData"

Question

我有一个问题Datatables.我也经历了这个链接,它没有给我任何结果.我已经包含了将数据直接解析到DOM中的所有先决条件.请帮我解决这个问题.

脚本

$(document).ready(function() {
  $('.viewCentricPage .teamCentric').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bPaginate": false,
    "bFilter": true,
    "bSort": true,
    "aaSorting": [
      [1, "asc"]
    ],
    "aoColumnDefs": [{
      "bSortable": false,
      "aTargets": [0]
    }, {
      "bSortable": true,
      "aTargets": [1]
    }, {
      "bSortable": false,
      "aTargets": [2]
    }],
  });
});

Answer 1

FYI dataTables需要一个结构良好的表格.它必须包含<thead>和<tbody>标记,否则会抛出此错误.还要检查以确保包括标题行在内的所有行都具有相同的列数.

以下将抛出错误(否<thead>和<tbody>标签)

<table id="sample-table">
    <tr>
        <th>title-1</th>
        <th>title-2</th>
    </tr>
    <tr>
        <td>data-1</td>
        <td>data-2</td>
    </tr>
</table>

以下也会抛出错误(列数不等)

<table id="sample-table">
    <thead>
        <tr>
            <th>title-1</th>
            <th>title-2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data-1</td>
            <td>data-2</td>
            <td>data-3</td>
        </tr>
    </tbody>
</table>

欲了解更多信息,请在此处阅

Answer 2

一个常见的原因Cannot read property 'fnSetData' of undefined是列数不匹配,就像在这个错误的代码中一样:

<thead>                 <!-- thead required -->
    <tr>                <!-- tr required -->
        <th>Rep</th>    <!-- td instead of th will also work -->
        <th>Titel</th>
                        <!-- th missing here -->
    </tr>
</thead>
<tbody>
    <tr>
        <td>Rep</td>
        <td>Titel</td>
        <td>Missing corresponding th</td>
    </tr>
</tbody>

虽然用下面的代码一个<th>每<td>(列必须匹配的人数):

<thead>
    <tr>
        <th>Rep</th>       <!-- 1st column -->
        <th>Titel</th>     <!-- 2nd column -->
        <th>Added th</th>  <!-- 3rd column; th added here -->
    </tr>
</thead>
<tbody>
    <tr>
        <td>Rep</td>             <!-- 1st column -->
        <td>Titel</td>           <!-- 2nd column -->
        <td>th now present</td>  <!-- 3rd column -->
    </tr>
</tbody>

当使用结构良好的thead和colspan但没有第二行时,也会出现错误.

对于包含7个列的表,以下内容不起作用,我们在javascript控制台中看到"无法读取未定义的属性'mData':

<thead>
    <tr>
        <th>Rep</th>
        <th>Titel</th>
        <th colspan="5">Download</th>
    </tr>
</thead>

虽然这有效:

<thead>
    <tr>
        <th rowspan="2">Rep</th>
        <th rowspan="2">Titel</th>
        <th colspan="5">Download</th>
    </tr>
    <tr>
        <th>pdf</th>
        <th>nwc</th>
        <th>nwctxt</th>
        <th>mid</th>
        <th>xml</th>
    </tr>
</thead>

Answer 3

我在通过脚手架生成器创建的Rails视图中使用DOM数据时遇到了同样的问题.默认情况下,视图省略<th>了最后三列的元素(包含显示,隐藏和销毁记录的链接).我发现,如果我在一个<th>元素中添加了那些列的标题<thead>,那就解决了问题.

我不能说这是否是你遇到的同样的问题,因为我看不到你的HTML.如果它不是同一个问题,你可以使用chrome调试器通过单击控制台中的错误(这将带你到它失败的代码)来确定它出错的列,然后添加一个条件断点(at col==undefined).当它停止时,您可以检查变量i以查看它当前所在的列,这可以帮助您找出与其他列不同的列.希望有所帮助!

Answer 4

如果您的表参数'aoColumns':[..]与正确的列数不匹配,也会发生这种情况.当从其他页面复制粘贴代码以快速启动数据集合时,通常会出现这样的问题.

例:

这不起作用:

<table id="dtable">
    <thead>
        <tr>
            <th>col 1</th>
            <th>col 2</th>
        </tr>
    </thead>
    <tbody>
        <td>data 1</td>
        <td>data 2</td>
    </tbody>
</table>
<script>
        var dTable = $('#dtable');
        dTable.DataTable({
            'order': [[ 1, 'desc' ]],
            'aoColumns': [
                null,
                null,
                null,
                null,
                null,
                null,
                {
                    'bSortable': false
                }
            ]
        });
</script>

但这会奏效:

<table id="dtable">
    <thead>
        <tr>
            <th>col 1</th>
            <th>col 2</th>
        </tr>
    </thead>
    <tbody>
        <td>data 1</td>
        <td>data 2</td>
    </tbody>
</table>
<script>
        var dTable = $('#dtable');
        dTable.DataTable({
            'order': [[ 0, 'desc' ]],
            'aoColumns': [
                null,
                {
                    'bSortable': false
                }
            ]
        });
</script>

Answer 5

拥有<thead>和<tbody>具有相同数量的<th>和<td>解决了我的问题。

Answer 6

发生这种情况的另一个原因是因为DataTable初始化中的columns参数.

列数必须与标题匹配

"columns" : [ {
                "width" : "30%"
            }, {
                "width" : "15%"
            }, {
                "width" : "15%"
            }, {
                "width" : "30%"
            } ]

我有7列

<th>Full Name</th>
<th>Phone Number</th>
<th>Vehicle</th>
<th>Home Location</th>
<th>Tags</th>
<th>Current Location</th>
<th>Serving Route</th>

Answer 7

提示1：

参考这个链接你会得到一些想法：

https://datatables.net/forums/discussion/20273/uncaught-typeerror-cannot-read-property-mdata-of-undefined

提示2：

检查以下是否正确：

• 请检查 Jquery 版本
• 请检查您的CDN或您本地数据表相关的.min 和 css 文件的版本
• 你的桌子有<thead></thead>&<tbody></tbody>标签
• 您的表头列长度相同像体列长
• 您使用一些 cloumnsstyle='display:none'作为相同的属性适用于您的标题和正文。
• 你的表列不为空，使用类似[ Null, --, NA, Nil ]
• 你的桌子很好，没有<td>, <tr>问题

Answer 8

你必须删除您colspan和数量th 以及td需要匹配.

Answer 9

当我尝试将 colspan 添加到最后一个时，我遇到了同样的错误

<table>
  <thead>
    <tr>    
      <th>&nbsp;</th> <!-- column 1 -->
      <th colspan="2">&nbsp;</th> <!-- column 2&3 -->
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

并通过在 tr 的末尾添加隐藏列来解决它

<thead>
  <tr>    
    <th>&nbsp;</th> <!-- column 1 -->
    <th colspan="2">&nbsp;</th> <!-- column 2&3 -->

    <!-- hidden column 4 for proper DataTable applying -->
    <th style="display: none"></th> 
  </tr>
</thead>

<tbody>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>

    <!-- hidden column 4 for proper DataTable applying -->
    <td style="display: none"></td>
  </tr>
</tbody>

对此的解释是，由于某种原因，DataTable 不能应用于最后一个带有 colspan 的表，但如果在任何中间 th 中使用 colspan，则可以应用。

这个解决方案有点老套，但比我找到的任何其他解决方案更简单、更短。

我希望这会帮助某人。

Answer 10

我遇到类似的错误。问题是标题行不正确。当我执行以下标题行时，我遇到的问题得到了解决。

<table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
    <tr>
                <th colspan="6">Common Title</th>
            </tr>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
</tbody>
</table>

Answer 11

在我的情况下,如果我使用没有标题的表,则会出现此错误

              <thead>
                   <tr>
                       <th>example</th>
                  </tr>
              </thead>