jQuery 数据表：无法读取未定义的属性“mData”

Question

提问by Thriveni

I have an issue with Datatables. I also went through this linkwhich didn't yield any results. I have included all the prerequisites where I'm parsing data directly into the DOM. Kindly help me to fix this issue.

我有一个问题Datatables。我还浏览了这个链接，但没有产生任何结果。我已经包含了将数据直接解析到 DOM 的所有先决条件。请帮我解决这个问题。

Script

脚本

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

回答by Moses Machua

FYI dataTablesrequires a well formed table. It must contain <thead>and <tbody>tags, otherwise it throws this error. Also check to make sure all your rows including header row have the same number of columns.

仅供参考dataTables需要一个格式良好的表格。它必须包含<thead>和<tbody>标签，否则会引发此错误。还要检查以确保包括标题行在内的所有行都具有相同的列数。

The following will throw error (no <thead>and <tbody>tags)

以下将抛出错误（没有<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>

The following will also throw an error (unequal number of columns)

以下也会抛出错误（列数不等）

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

For more info read more here

有关更多信息，请在此处阅读更多信息

Answer 2

回答by PaulH

A common cause for Cannot read property 'fnSetData' of undefinedis the mismatched number of columns, like in this erroneous code:

一个常见的原因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>

While the following code with one <th>per <td>(number of columns must match) works:

虽然用下面的代码一个<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>

The error also appears when using a well-formed thead with a colspan but without a second row.

当使用带有 colspan 但没有第二行的格式良好的 thead 时，也会出现该错误。

For a table with 7 colums, the following does not work and we see "Cannot read property 'mData' of undefined" in the javascript console:

对于具有 7 列的表，以下内容不起作用，我们在 javascript 控制台中看到“无法读取未定义的属性 'mData'”：

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

While this works:

虽然这有效：

<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

回答by Nathan Hanna

I had this same problem using DOM data in a Rails view created via the scaffold generator. By default the view omits <th>elements for the last three columns (which contain links to show, hide, and destroy records). I found that if I added in titles for those columns in a <th>element within the <thead>that it fixed the problem.

我在通过脚手架生成器创建的 Rails 视图中使用 DOM 数据时遇到了同样的问题。默认情况下，视图会忽略<th>最后三列的元素（其中包含显示、隐藏和销毁记录的链接）。我发现如果我在<th>元素中为这些列添加标题<thead>，它就解决了问题。

I can't say if this is the same problem you're having since I can't see your html. If it is not the same problem, you can use the chrome debugger to figure out which column it is erroring out on by clicking on the error in the console (which will take you to the code it is failing on), then adding a conditional breakpoint (at col==undefined). When it stops you can check the variable ito see which column it is currently on which can help you figure out what is different about that column from the others. Hope that helps!

我不能说这是否与您遇到的问题相同，因为我看不到您的 html。如果不是同一问题，您可以使用 chrome 调试器通过单击控制台中的错误（这将带您到它失败的代码）来确定它出错的列，然后添加一个条件断点（在col==undefined）。当它停止时，您可以检查变量i以查看它当前位于哪一列，这可以帮助您找出该列与其他列的不同之处。希望有帮助！

debugging mData error

调试 mData 错误

Answer 4

回答by Masoud Darvishian

Having <thead>and <tbody>with the same numbers of <th>and <td>solved my problem.

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

Answer 5

回答by DrewT

This can also occur if you have table arguments for things like 'aoColumns':[..]which don't match the correct number of columns. Problems like this can commonly occur when copy pasting code from other pages to quick start your datatables integration.

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

Example:

例子：

This won't work:

这行不通：

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

But this will work:

但这会起作用：

<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 6

回答by Siddharth

One more reason why this happens is because of the columns parameter in the DataTable initialization.

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

The number of columns has to match with headers

列数必须与标题匹配

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

I had 7 columns

我有 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

回答by Francisco Balam

You have to remove your colspanand the number of thand tdneeds to match.

您必须删除您colspan的th和td需要匹配的数量。

Answer 8

回答by venkatskpi

Tips 1:

提示1：

Refer to this Link you get some Ideas:

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

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

Tips 2:

提示2：

Check following is correct:

检查以下是否正确：

Please check the Jquery Vesion
Please check the versiion of yours CDNor your local datatable related .min & css files
your table have <thead></thead>& <tbody></tbody>tags
Your table HeaderColumns Length same like BodyColumns Length
Your Using some cloumns in style='display:none'as same propery apply in you both Header & body.
your table columns no empty, use something like [ Null, --, NA, Nil ]
Your table is well one with out <td>, <tr>issue

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

Answer 9

回答by Asad

in my case this error occured if i use table without header

在我的情况下，如果我使用没有标题的表，则会发生此错误

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

Answer 10

回答by renkse

I faced the same error, when tried to add colspan to last th

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

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

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

and solved it by adding hidden column to the end of tr

并通过在 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>
    <tr>&nbsp;</tr>
    <tr>&nbsp;</tr>
    <tr>&nbsp;</tr>

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

Explanaition to that is that for some reason DataTable can't be applied to table with colspan in the last th, but can be applied, if colspan used in any middle th.

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

This solution is a bit hacky, but simpler and shorter than any other solution I found.

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

I hope that will help someone.

我希望这会帮助某人。

jQuery 数据表：无法读取未定义的属性“mData”

提问by Thriveni

回答by Moses Machua

回答by PaulH

回答by Nathan Hanna

回答by Masoud Darvishian

回答by DrewT

回答by Siddharth

回答by Francisco Balam

回答by venkatskpi

回答by Asad

回答by renkse

相关推荐

最近更新

标签

jQuery 数据表：无法读取未定义的属性“mData”

提问by Thriveni

回答by Moses Machua

回答by PaulH

回答by Nathan Hanna

回答by Masoud Darvishian

回答by DrewT

回答by Siddharth

回答by Francisco Balam

回答by venkatskpi

回答by Asad

回答by renkse

相关推荐

Jquery POST在spring mvc中给出403禁止错误

jQuery 获取元素的实际浮点宽度

jQuery Jquery从页面底部向上滑动div

使用 jQuery 根据 Font-Family 更改正文字体大小

相关推荐

最近更新

标签