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/

來源

2017-10-16 Ratha

我的建議是請在使用DataTable之後，Ajax加載它是異步請求和你的rows.push沒有完成，然後你嘗試設置數據表。 –

@FerhatBAŞ，我應該如何訂購？在準備好文檔之前，我嘗試先調用ajax函數。那是錯的嗎？ – Ratha

請在.append函數$（'＃clients_data'）之後，在ajax成功中請此代碼。DataTable（{「pagingType」：「full_numbers」}）; –

移動每個相應的調用成功功能中的兩個$ .datatable（）函數調用。

請記住，ajax是異步的含義，下一行將在調用後立即執行，即使它沒有返回。我們希望確保只有在ajax完成插入表數據時才調用datatable（）函數。

來源

2017-10-16 06:01:08

dataTable給出未捕獲的TypeError：無法讀取未定義的屬性'mData'

回答

相關問題