数据表插件错误未捕获的类型错误：无法读取未定义的属性“mData”

Posted 2023-05-07

【中文标题】数据表插件错误未捕获的类型错误：无法读取未定义的属性“mData”

【英文标题】：Datatables plugin error Uncaught TypeError: Cannot read property 'mData' of undefined

【发布时间】：2016-06-28 10:02:24

【问题描述】：

我正在使用jQuery Datatables plugin。分页不起作用，所以我尝试在使用 ajax/jQuery 附加我的行之后初始化数据表，希望一旦添加了所有行并初始化数据表，它就会起作用。但我收到一个错误：

 "Uncaught TypeError: Cannot read property 'mData' of undefined."

我只是想让分页工作，所以当通过 jQuery 添加行时，我什至不确定这是否是正确的方法。

HTML

<table id="table" class="table-striped" style="width:100%">
    <thead>
        <tr>
        <td>Date</td>
        <td>Route</td>
        <td></td>
        </tr>
    </thead>
    <tbody id="tablebody">
    </tbody>
</table>

jQuery

function loadfromDB(event) 
var uid = $('#uid').val();

        $.ajax(
            type: "POST",
            url: "getplans.php",
            data: uid:uid,
            dataType: 'json',
            cache: false,
        )
        .success(function(response) 
            $('input').removeClass('error').next('.errormessage').html('');
            if(!response.errors && response.result) 
                 $.each(response.result, function( index, value) 
                   $("#tablebody").append('<tr><td>'+value[4]+'</td><td>'+value[2]+'</td><td>'+value[3]+'</td></tr>');

                  ); 
             $('#table').DataTable();
             

            else 
                $.each(response.errors, function( index, value) 
                    // add error classes
                    $('input[name*='+index+']').addClass('error').after('<div class="errormessage">'+value+'</div>')
                );
            
        );

   

【问题讨论】：

检查您的表格结构，确保表格标题与表格单元格相同。

你完全正确！我检查并意识到我的 有一个额外的列。非常感谢！！！ 那么请在下面接受我的回答 :) 谢谢！

【参考方案1】：

检查您的表格结构，确保表格标题与表格单元格相同。

<table>
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
        </tr>
    <thead>
    <tbody>
        <tr>
            <td>table cell 1</td>
            <td>table cell 2</td>
            <td>table cell 3</td>
        </tr>
    </tbody>
<table>

【参考方案2】：

您可以使用 ajax 作为数据源来构建您的数据表（我不会写它，它在数据表 siet 上有详细记录，请在此处查看）。

在初始化之后添加数据。很简单。我给你举个例子：

var myTable = $('#myTableId').DataTable( /*... 在此处设置选项 */ );

a) 确保你从服务器返回一个有效的 JSON，对应输入你的数据表期望 b) 修改。接收和解析 JSON 的 ajax 请求 c) 在响应的 SUCCESS 回调中：

    // this 2 lines to recive and parse JSON
    dataType: 'json',
    contentType: "application/json",

    success: function(json) 

     // first, empty the table:
     myTable.clear();

     // add the data and redraw the table:
     myTable.rows.add(json).draw();


    

【讨论】：

感谢@iModi。我肯定会考虑重写我的代码，因为你的方法看起来更干净。我很感激。然而，感谢 Code Demon，我的问题得到了解决。我的一个小疏忽。

我强烈不建议在数据表环境之外渲染后弄乱表 dom。它会给你几个小时的错误跟踪和头痛（我经历过）。如果更改，则刷新数据对象并重绘表格。不要乱用已经渲染的 DT 对象。

太好了，我现在要重写我的代码，这样就不用急于解决问题了。感谢您的意见先生！