2017-10-16 18 views
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/

+0

私のアドバイスは、それが非同期要求であり、あなたのrows.pushがデータテーブルを設定しようとしなかったので、ロードした後にDataTableを使用してください。 –

+0

@FerhatBAŞ、どうすればいいですか?ドキュメント準備ができています。私はAjax関数を最初に呼び出そうとしています。それは間違っていますか? – Ratha

+0

このコードは、.append関数$( '#clients_data')の後にajaxの成功を示しています。DataTable({"pagingType": "full_numbers"}); –

答えて

2

移動します。

ajaxは非同期であることを覚えておいてください。返されなくても、呼び出した直後に次の行が実行されます。 ajaxがテーブルデータの挿入を完了したときにdatatable()関数が呼び出されるようにしたい。

関連する問題