dataTable给出未捕获的TypeError：无法读取未定义的属性'mData'

Question

I'm trying to use jQuery Datatable plugin for my pagination in the HTML page. 我正在尝试使用jQuery Datatable插件在HTML页面中进行分页。

<!DOCTYPE html>
<html>
<head> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript"  src=" https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"  src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>

<meta charset="UTF-8">
<title>Clients</title>
</head>
<body>
<table style="width:100%" id="clients_data">
<caption>Clients</caption>
  <tr>
    <th>Clients</th>
    <th>Number of Sites</th> 
    <th>Reset the Processing</th> 
  </tr>
  </table>

<table style="width:100%" id="machines_data">
<caption>Machines</caption>
  <tr>
   <th>Number</th>
    <th>Machine Name</th>
  </tr>
  </table>

$(document).ready(function() {
     loadCustomers();
     loadMachines();
    $('#clients_data').DataTable( {
        "pagingType": "full_numbers"
    } );
    $('#machines_data').DataTable( {
        "pagingType": "full_numbers"
    } );

} );


function loadCustomers() {
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/cache/getCustomers',
        dataType: 'json',
        success: function(data) {
            var rows = [];    
            $.each(data,function(id,value) {
                      rows.push('<tr><td><a href="clientSiteInfo.html?client='+id+'">'+id+'</td><td>'+value+'</td><td><button type="button" onclick="reset(\''+id+'\')">Reset</td></tr>');
                    });
            $('#clients_data').append(rows.join(''));
        }
    });
};

function loadMachines() {
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/cache/getMachines',
        dataType: 'json',
        success: function(data) {
             var rows = [];    
             $.each(data,function(id,value) {
                      rows.push('<tr><td>'+id+'</td><td><a href="machineInfo.html?machine='+value+'">'+value+'</td></tr>');
                    });
             $('#machines_data').append(rows.join(''));

        }
    });
};
</script>
</body>
</html>

For the above, when I try to load page I'm getting: 对于上面，当我尝试加载页面时，我得到：

Uncaught TypeError: Cannot read property 'mData' of undefined at $('#clients_data').DataTable({...}) 未捕获的TypeError：无法读取$（'＃clients_data'）。DataTable（{...}）中未定义的属性'mData'

What is wrong in my script? 我的脚本有什么问题？ I'm following this guide . 我正在遵循本指南。

My fiddle: https://jsfiddle.net/yeu7f3f2/ 我的小提琴： https : //jsfiddle.net/yeu7f3f2/

Answer 1

Move the two $.datatable() function calls inside the success functions of each respective calls. 将两个$ .datatable（）函数调用移至每个调用的成功函数内。

Remember that ajax is async meaning the next line will execute immediately after calling it even if it hasnt returned. 请记住，ajax是异步的，这意味着即使没有返回，下一行也将在调用后立即执行。 We want to make sure the datatable() function only is called when ajax has finished inserting the table data. 我们要确保仅当ajax完成表数据的插入时才调用datatable（）函数。

dataTable给出未捕获的TypeError：无法读取未定义的属性'mData'

问题描述

1 个解决方案

解决方案1
3 2017-10-16 06:01:08

dataTable给出未捕获的TypeError：无法读取未定义的属性&#39;mData&#39;

问题描述

1 个解决方案

解决方案1 3 2017-10-16 06:01:08

dataTable给出未捕获的TypeError：无法读取未定义的属性'mData'

解决方案1
3 2017-10-16 06:01:08