0

問題点

ソースコード上、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);

});

1 件の回答 1

0

自己解決したので、回答を投稿します。

スクリプトの実行順序を理解していなかったため、テーブルに反映できていませんでした。

スクリプトファイルのデバッグ

Chromeのデベロッパーツールによって、スクリプトファイルのブレイクポイントで途中の変数状態を見ることができました。

ChromeのデベロッパーツールでJavaScriptをデバッグする方法

ブレイクポイントで判明したのは、datatablesに反映するコードに到達した時点で、test_data のデータが取得できていない状態でした。

API取得後に反映するように変更する。

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};
            }
        }
    ).always(
        function(){

        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);

        }
    );

    // デフォルトの設定を変更
    $.extend( $.fn.dataTable.defaults, { 
        language: {
            url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
        } 
    });

});

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。