数据表：无法读取未定义的属性'mData'-Java 学习之路

253

我有 Datatables 的问题 . 我也经历了this link，它没有给我任何结果 . 我已经包含了将数据直接解析到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]
    }],
  });
});

16 回答

仅供参考 dataTables 需要一张结构良好的 table . 它必须包含 <thead> 和 <tbody> 标记，否则会抛出此错误 . 还要检查以确保包括 Headers 行在内的所有行都具有相同的列数 .

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

欲了解更多信息read more here

回复于 2024-04-29T14:07:27+08:00

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>

以下代码与 one <th> per <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>

回复于 2024-04-29T14:07:27+08:00

8

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

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

回复于 2024-04-29T14:07:27+08:00

如果您的 '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>

回复于 2024-04-29T14:07:27+08:00

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

The number of columns has to match with headers

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

回复于 2024-04-29T14:07:27+08:00

528

您必须删除 colspan ，并且需要匹配 th 和 td 的数量 .

回复于 2024-04-29T14:07:27+08:00

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

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

回复于 2024-04-29T14:07:27+08:00

-3

从上面给出的答案来看，我的问题略有不同 . 对我来说，HTML标记很好，但我在javascript中的一个列丢失了，并且与html不匹配 .

即

<table id="companies-index-table" class="table table-responsive-sm table-striped">

                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Created at</th>
                                <th>Updated at</th>
                                <th>Count</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($companies as $company)
                                <tr>
                                    <td>{{ $company->id }}</td>
                                    <td>{{ $company->name }}</td>
                                    <td>{{ $company->created_at }}</td>
                                    <td>{{ $company->updated_at }}</td>
                                    <td>{{ $company->count }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

我的剧本： -

<script>
        $(document).ready(function() {
            $('#companies-index-table').DataTable({
                serverSide: true,
                processing: true,
                responsive: true,
                    ajax: "{{ route('admincompanies.datatables') }}",
                columns: [
                    { name: 'id' },
                    { name: 'name' },
                    { name: 'created_at' },
                    { name: 'updated_at' },     <-- I was missing this line so my columns didn't match the thead section.
                    { name: 'count', orderable: false },
                ],
            });
        });
    </script>

回复于 2024-04-29T14:07:27+08:00

0

我有一个动态生成但形状错误的表格，其中包含拼写错误 . 我错误地在另一个 <td> 内复制了一个 <td> 标签 . 我的列数匹配 . 我有 <thead> 和 <tbody> 标签 . 一切都匹配，除了这个小错误，我没有注意到一段时间，因为我的专栏中有很多链接和图像标签 .

回复于 2024-04-29T14:07:27+08:00
6
In my case, and using ASP.NET GridView, UpdatePanel and with DropDownList (with Chosen plugin where I reset value to zero using a Javascript line), 我收到了这个错误并且几天都没有希望地尝试了一切 . 问题是我的代码背后的代码如下所示，当我选择一个值两次以将其操作应用于选定的网格行时，我得到了该错误 . 我想好几天这是一个Javascript问题（再次，在我的情况下），最后修复为更新过程的drowpdown值给出零：
```
private void ddlTasks_SelectedIndexChanged(object sender, System.EventArgs e)
  {
     if (ddlTasks.SelectedValue != 0) {
        ChangeStatus(ddlTasks.SelectedValue);
        ddlTasks.SelectedValue = "0"; //// **This fixed my issue**
     }

     dvItemsGrid.DataSource = CreateDatasource();
     dvItemsGrid.DataBind();
     dvItemsGrid.UseAccessibleHeader = true;
     dvItemsGrid.HeaderRow.TableSection = TableRowSection.TableHeader;

  }
```
This was my fault:
```
$('#<%= DropDownList.ClientID%>').val('0').trigger("chosen:updated").chosen();
```
回复于 2024-04-29T14:07:27+08:00

我遇到了同样的问题，但我正在生成表 Dynamically . 就我而言，我的表缺少 <thead> 和 <tbody> 标签 .

这是我的代码片段，如果它帮助了某人

//table string
   var strDiv = '<table id="tbl" class="striped center responsive-table">';

   //add headers
   var strTable = ' <thead><tr id="tableHeader"><th>Customer Name</th><th>Customer Designation</th><th>Customer Email</th><th>Customer Organization</th><th>Customer Department</th><th>Customer ContactNo</th><th>Customer Mobile</th><th>Cluster Name</th><th>Product Name</th><th> Installed Version</th><th>Requirements</th><th>Challenges</th><th>Future Expansion</th><th>Comments</th></tr> </thead> <tbody>';


  //add data
  $.each(data, function (key, GetCustomerFeedbackBE) {
                            strTable = strTable + '<tr><td>' + GetCustomerFeedbackBE.StrCustName + '</td><td>' + GetCustomerFeedbackBE.StrCustDesignation + '</td><td>' + GetCustomerFeedbackBE.StrCustEmail + '</td><td>' + GetCustomerFeedbackBE.StrCustOrganization + '</td><td>' + GetCustomerFeedbackBE.StrCustDepartment + '</td><td>' + GetCustomerFeedbackBE.StrCustContactNo + '</td><td>' + GetCustomerFeedbackBE.StrCustMobile + '</td><td>' + GetCustomerFeedbackBE.StrClusterName + '</td><td>' + GetCustomerFeedbackBE.StrProductName + '</td><td>' + GetCustomerFeedbackBE.StrInstalledVersion + '</td><td>' + GetCustomerFeedbackBE.StrRequirements + '</td><td>' + GetCustomerFeedbackBE.StrChallenges + '</td><td>' + GetCustomerFeedbackBE.StrFutureExpansion + '</td><td>' + GetCustomerFeedbackBE.StrComments + '</td></tr>';
                        });

//add end of tbody
 strTable = strTable + '</tbody></table>';

//insert table into a div                 
   $('#divCFB_D').html(strDiv);
   $('#tbl').html(strTable);


    //finally add export buttons 
   $('#tbl').DataTable({
                            dom: 'Bfrtip',
                            buttons: [
                                'copy', 'csv', 'excel', 'pdf', 'print'
                            ]
                        });

回复于 2024-04-29T14:07:27+08:00

2
除了不一致和数字之外，datatable脚本列部分中缺少的项也可能导致这种情况 . 纠正修复我的数据表搜索栏 .

我在说这部分;
```
"columns": [
  null,
  .
  .
  .
  null
           ],
```
我一直在努力解决这个错误，直到我指出这个部分比我的总数还少一个“空” .
回复于 2024-04-29T14:07:27+08:00
35
Tips 1:

请参阅此链接，您会得到一些想法：

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

Tips 2:

检查以下是否正确：
- 请检查Jquery Vesion
- 请查看您的文章 CDN 或您当地的相关数据 .min & css files
- 你的 table 有 <thead></thead> 和 <tbody></tbody> 标签
- 您的表 Header 列长度与 Body 列长度相同
- 你在 style='display:none' 中使用一些cloumns，因为相同的属性适用于Header和body .
- 你的表列没有空，使用像 [ Null, --, NA, Nil ] 这样的东西
- 你的 table 很好，没有 <td>, <tr> 问题
回复于 2024-04-29T14:07:27+08:00
1

您需要在 <thead> 中为行 Headers 包装行，并为行添加 <tbody> . 还要确保你有匹配的号码 . 列 Headers <th> 与 td 一样

回复于 2024-04-29T14:07:27+08:00
9
我可能是由aoColumns字段引起的 . 如此处所述

aoColumns：如果指定，则此数组的长度必须等于原始HTML表中的列数 . 如果您只希望使用默认值和自动检测的选项，请使用“null” .

然后，您必须添加表格列中的字段
```
...
aoColumnDefs: [
    null,
    null,
    null,
    { "bSortable": false },
    null,
],
...
```
回复于 2024-04-29T14:07:27+08:00

我找到了一些“解决方案” .

此代码不起作用：

<table>
<thead>
    <tr>
        <th colspan="3">Test</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody>

但这没关系：

<table>
<thead>
    <tr>
        <th colspan="2">Test</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody>

我认为，问题是，最后的TH不能有属性colspan .

回复于 2024-04-29T14:07:27+08:00

数据表：无法读取未定义的属性'mData'

16 回答

相关问题