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

2020/10/31 15:03 · jquery ·  · 0评论

我有一个问题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]
    }],
  });
});

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>

欲了解更多信息,请点击这里

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

当使用格式正确且带有colspan但没有第二行的thead时,也会出现该错误。

对于具有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>

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

我不能说这是否是您遇到的相同问题,因为我看不到您的html。如果不是相同的问题,则可以使用chrome调试器通过单击控制台中的错误来找出错误所在的列(它将带您进入发生错误的代码),然后添加条件断点(位于col==undefined)。停止时,您可以检查变量i以查看其当前在哪一列上,从而可以帮助您了解该列与其他列的不同之处。希望有帮助!

调试mData错误

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

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

发生这种情况的另一个原因是由于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>

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

秘诀1:

参考此链接,您将获得一些想法:

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

秘诀2:

检查以下内容是否正确:

  • 请检查jQuery Vesion
  • 请检查您CDN的版本或与本地数据表相关的.min和css文件
  • 您的桌子上有<thead></thead><tbody></tbody>标签
  • 您的表格标题列长度相同像列长
  • style='display:none'在标题和正文中都使用相同的块状体。
  • 您的表列不为空,使用类似 [Null,-,NA,Nil]
  • 您的餐桌很好,没有<td>, <tr>问题

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

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

当尝试将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的表,但是如果在任何中间带使用colspan的话,都可以应用。

这个解决方案有点笨拙,但是比我发现的任何其他解决方案都更简单,更短。

希望对您有所帮助。

与上面给出的答案相比,我的问题略有不同。对我来说,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>

我有一个动态生成的但格式错误的表格,带有错字。误将<td>标签复制到另一个标签中<td>我的栏数相符。我有<thead><tbody>标签。一切都匹配,除了我有一段时间没有注意到的这个小错误,因为我的专栏中有很多链接和图像标签。

就我而言,并使用ASP.NET GridView,UpdatePanel和DropDownList(使用Chosen插件,在其中我使用Javascript行将值重置为零),出现此错误,并且尝试了数天没有希望。问题是我后面的代码下拉菜单中的代码如下,当我选择一个值两次以将其操作应用于选定的网格行时,出现该错误。我想了好几天,这是一个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;

  }

这是我的错:

     $('#<%= DropDownList.ClientID%>').val('0').trigger("chosen:updated").chosen();

我遇到了同样的问题,但是我正在动态生成表就我而言,我的桌子不见了<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'
                            ]
                        });

除了不一致和数字外,datatable脚本列部分中的缺失项也可能导致这种情况。更正该问题后,我的数据表搜索栏得以修复。

我在说这部分;

"columns": [
  null,
  .
  .
  .
  null
           ],

我一直为这个错误而苦苦挣扎,直到被指出该部分的“空值”比我的总戏剧数少一个。

这使我发疯-如何在.NET MVC视图中成功呈现DataTable。这工作:

 **@model List<Student>
 @{
    ViewData["Title"] = "Index";
}
 <h2>NEW VIEW Index</h2>
 <table id="example" class="display" style="width:100%">
   <thead>
   <tr>
   <th>ID</th>
    <th>Firstname</th>
    <th>Lastname</th> 
  </tr>
  </thead>
  <tbody>
@foreach (var element in Model)
{
    <tr>
    <td>@Html.DisplayFor(m => element.ID)</td>
    <td>@Html.DisplayFor(m => element.FirstName)</td>
    <td>@Html.DisplayFor(m => element.LastName)</td>
    </tr>

}
</tbody>
</table>**

JS文件中的脚本:

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

您需要为行<thead>标题和行包装<tbody>行。还要确保您有匹配的编号。对列标题的<th>处理方式与td

我可能是由aoColumns字段引起的。如此处所述

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

然后,您必须像表“列”中那样添加字段

...
aoColumnDefs: [
    null,
    null,
    null,
    { "bSortable": false },
    null,
],
...

在我的情况下,此错误的原因是由于我习惯于复制粘贴表代码,因此我有2个表具有相同的ID名称且表结构不同。请确保每个表都有不同的ID。

<table id="tabel_data">
    <thead>
        <tr>
            <th>heading 1</th>
            <th>heading 2</th>
            <th>heading 3</th>
            <th>heading 4</th>
            <th>heading 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data-1</td>
            <td>data-2</td>
            <td>data-3</td>
            <td>data-4</td>
            <td>data-5</td>
        </tr>
    </tbody>
</table>

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

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

该代码不起作用:

<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属性。

本文地址:http://jquery.askforanswer.com/shujubiaowufaduquweidingyideshuxing-mdata.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!