問題点
ソースコード上、js/index.jsにハードコードしたdata変数では Datatablesに表示ができます。
しかし、APIで取得したデータtest_dataでは表示できません。
console.logで表示したデータは、ブラウザのデベロッパーツールの表示において、どちらのデータも以下のように同じ形式にしか見えませんでした。
Attray(5)
0:{id:1,name:'A'}
1:{id:1,name:'B'}
....
ソースコード
関連するhtmlファイル、scriptファイルを以下に示します。
base.html
<!doctype html>
{% load static %}
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial_scale=1">
<title>{% block page_title %}{% endblock %}</title>
{# --- css --- #}
<link rel="stylesheet" href="{% static 'css/normalize.css' %}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>
<link rel="stylesheet" href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css"/>
<link rel="stylesheet" href="{% static 'css/base.css' %}">
{% block extra_css %}{% endblock %}
</head>
<body>
<div class="ui container">
{% block content %}{% endblock %}
</div>
{# --- js --- #}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous" defer></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous" defer></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" defer></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js" defer></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js" defer></script>
{% block extra_js %}{% endblock %}
</body>
</html>
index.html
{% extends "base.html" %}
{% load static %}
{% block page_title %}TEST PAGE{% endblock %}
{% block extra_css %}
{% endblock %}
{% block content %}
<header class="page-header" role="banner">
<h1>Datatables Checkbox</h1>
</header>
<div class="page-main" role="main">
<table id="test_table" class="table" style="width:100%">
<thead>
<tr id="test_header">
<th></th>
<th>key</th>
<th>name</th>
</tr>
</thead>
</table>
</div>
{% endblock %}
{% block extra_js %}
<script src="{% static 'js/index.js' %} " defer></script>
{% endblock %}
js/index.js
let tx_table;
$ (function(){
var num = 0;
let test_data = [];
let data = [
{id:1,name:"A"},
{id:2,name:"B"},
{id:3,name:"C"},
{id:4,name:"D"},
{id:5,name:"E"},
]
$.ajax({
type : "GET",
url : "http://127.0.0.1:8000/api",
dataType : "json",
async : false,
}).then(
function(json) {
for (var i = 0; i < json.length; i++){
test_data [num++] = {id:json[i].id, name:json[i].name};
}
}
);
// デフォルトの設定を変更
$.extend( $.fn.dataTable.defaults, {
language: {
url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
}
});
console.log(data)
console.log(test_data)
let option = {
columns: [
{
data: 'name',
checkboxes: {
selectRow: true
}
},
{data: 'id'},
{data: 'name'},
],
data: data,
order: [1, 'asc'],
select: {
style: 'multi'
},
};
tx_table = $('#test_table').DataTable(option);
});