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

问题描述：

我正在尝试在HTML页面中为我的分页使用jQuery Datatable插件。dataTable给出未捕获的TypeError：无法读取未定义的属性'mData'

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

针对上述情况，当我尝试加载页面我得到：

Uncaught TypeError: Cannot read property 'mData' of undefined at $('#clients_data').DataTable({...})

有什么不对我的脚本？我跟随this guide。

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

我的建议是请在使用DataTable之后，Ajax加载它是异步请求和你的rows.push没有完成，然后你尝试设置数据表。 –

@FerhatBAŞ，我应该如何订购？在准备好文档之前，我尝试先调用ajax函数。那是错的吗？ – Ratha

请在.append函数$（'＃clients_data'）之后，在ajax成功中请此代码。DataTable（{“pagingType”：“full_numbers”}）; –

答

移动每个相应的调用成功功能中的两个$ .datatable（）函数调用。

请记住，ajax是异步的含义，下一行将在调用后立即执行，即使它没有返回。我们希望确保只有在ajax完成插入表数据时才调用datatable（）函数。

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

相关推荐