1
私はHTMLページのページ作成にjQuery Datatableプラグインを使用しようとしています。上記の場合dataTableはUncaught 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に従っています。
マイフィドル: 2 $ .datatable()関数は、それぞれの呼び出しの成功関数の内部呼び出しますhttps://jsfiddle.net/yeu7f3f2/
私のアドバイスは、それが非同期要求であり、あなたのrows.pushがデータテーブルを設定しようとしなかったので、ロードした後にDataTableを使用してください。 –
@FerhatBAŞ、どうすればいいですか?ドキュメント準備ができています。私はAjax関数を最初に呼び出そうとしています。それは間違っていますか? – Ratha
このコードは、.append関数$( '#clients_data')の後にajaxの成功を示しています。DataTable({"pagingType": "full_numbers"}); –