FLASKでdatatablesを使いたいがデータ部が表示されない

前提・実現したいこと
FLASKを使ったWebアプリを製作しています。
フォームで検索条件を入力し、SQLクエリーを生成してデータベースから該当レコードを抽出してテーブル形式で表示するものです。テーブル表示まではうまくいきましたが、これにページングの機能を付けたいと考え、ネットで調べた結果、DatatablesというjQueryプラグインが多機能で良いと判断し、使いたいと考えました。
色々なサイトの記事を参考にしてコードを書きましたが、使い方が分からずデータの表示が行われません。

単独のHTMLファイルでは正常動作
質問をするに際し、データベース関係の処理は省略し、FLASK側で単純にjsonデータを送ってdatatablesでテーブル表示するコードにしました。

まず、datatables自体が正しく動作するか、単独のHTMLファイルに以下のコードを書いてブラウザで開くと正常に動作しました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> 
5    <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>
6</head>
7<body>
8    <table id="myTable" class="table table-striped" style="width:100%" >
9         <thead>
10            <tr>
11                <th>id_inspect</th>
12                <th>inspected_at</th>
13                <th>judge</th>
14                <th>n_wire</th>
15                <th>n_seg</th>
16                <th>左針金</th>
17                <th>右針金</th>
18            </tr>
19        </thead> 
20        <tbody>
21            <tr><td>2030</td><td>2020-07-01 00:16:53</td><td>101</td><td>0</td><td>0</td><td>200701_001653_L.png</td><td>200701_001653_R.png</td></tr>
22            <tr><td>2040</td><td>2020-07-01 00:17:13</td><td>101</td><td>1</td><td>1</td><td>200701_001653_L.png</td><td>200701_001653_R.png</td></tr>
23            <tr><td>2040</td><td>2020-07-01 00:17:22</td><td>102</td><td>2</td><td>1</td><td>200701_001653_L.png</td><td>200701_001653_R.png</td></tr>
24        </tbody>
25    </table>  
26    <script>
27        jQuery(function($){
28            $("#myTable").DataTable();
29        });
30    </script>
31</body>
32コード

FLASKとの連携プログラムで動作しない
しかし、FLASKと連携動作を行う以下のコードではブラウザで表示したときに以下のエラーメッセージが表示された後、datatablesのヘッダーやソートアイコン、検索ボックスなどだけが表示されて、データが表示されません。

エラーメッセージ：
DataTables warning: table id=myTable
Requested unknown parameter 'id_inspect' for row 0, column 0.
For more information about this error, please see http://datatables.net/tn/4

Pythonプログラムは以下の通り。

Python
1from flask import Flask, render_template, request, jsonify
2
3app = Flask(__name__)
4
5@app.route('/')
6def sql_01():
7    return render_template('ShowList06.html') 
8
9@app.route('/list_post', methods=['POST'])
10def send_json():
11    rlist=[
12        {'id_inspect': 2030, 'inspected_at': '2020-07-01 00:16:53', 'judge': 101, 'n_wire': 0, 'n_seg': 0, 'l_wire': '200701_001653_L.png', 'r_wire': '200701_001653_R.png'}, 
13        {'id_inspect': 9789, 'inspected_at': '2020-07-01 02:31:34', 'judge': 101, 'n_wire': 0, 'n_seg': 0, 'l_wire': '200701_023134_L.png', 'r_wire': '200701_023134_R.png'}, 
14        {'id_inspect': 12976, 'inspected_at': '2020-07-01 03:08:11', 'judge': 101, 'n_wire': 29, 'n_seg': 0, 'l_wire': '200701_030811_L.png', 'r_wire': '200701_030811_R.png'},
15        {'id_inspect': 40417, 'inspected_at': '2020-07-01 10:01:29', 'judge': 101, 'n_wire': 0, 'n_seg': 0, 'l_wire': '200701_100129_L.png', 'r_wire': '200701_100129_R.png'}, 
16        {'id_inspect': 41683, 'inspected_at': '2020-07-01 10:13:22', 'judge': 101, 'n_wire': 3, 'n_seg': 6, 'l_wire': '200701_101322_L.png', 'r_wire': '200701_101322_R.png'}
17    ]
18    print(rlist)   
19    return jsonify(ResultSet=rlist)
20
21## おまじない
22if __name__ == "__main__":
23    app.run(debug=True)
24

templatesフォルダのShowList06.HTMLファイルは以下の通り。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> 
5    <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>
6
7</head>
8<body>
9    <table id="myTable" class="table table-striped" style="width:100%" >
10         <thead>
11            <tr>
12                <th>id_inspect</th>
13                <th>inspected_at</th>
14                <th>judge</th>
15                <th>n_wire</th>
16                <th>n_seg</th>
17                <th>左針金</th>
18                <th>右針金</th>
19            </tr>
20        </thead> 
21    </table>  
22    <script>
23        $(document).ready(function() {
24            var tbl = $('#myTable').DataTable({
25                data: 'ResultSet',
26                processing: true,
27                serverSide: true,
28                ajax: {
29                    dataType: 'json',
30                    url: '/list_post',
31                    method: 'post'
32                },
33            columns: [
34                { data: 'id_inspect' },
35                { data: 'inspected_at' },
36                { data: 'judge' },
37                { data: 'n_wire' },
38                { data: 'n_seg' },
39                { data: 'l_wire' },
40                { data: 'r_wire' } ]
41            });
42        });
43    </script>
44</body>

FALASKとのデータのやり取り部分に問題があると思うのですが、解決できませんでした。
Webアプリは最近始めたところですので、恐縮ですが、アドバイス頂けると幸いです。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

ShowList06.htmlの<script>タグを下記のようにしてはいかがでしょうか。

    <script>
        $(document).ready(function() {
            var tbl = $('#myTable').DataTable({
                bInfo: true, //追加
                bSort: true, //追加
                processing: true,
                // serverSide: true, //削除する。
                ajax: {
                    dataType: 'json',
                    url: '/list_post',
                    method: 'post',
                    dataSrc : "ResultSet" //追加
                },
            columns: [
                { data: 'id_inspect' },
                { data: 'inspected_at' },
                { data: 'judge' },
                { data: 'n_wire' },
                { data: 'n_seg' },
                { data: 'l_wire' },
                { data: 'r_wire' } ]
            });
        });
        jQuery(function($){ 
          $("#myTable").DataTable(); 
        });
    </script>

参考：
https://qiita.com/nissuk/items/7ac59af5de427c0585c5
https://www.redforce.tokyo/2014/03/data-table-1.html
36min.

投稿2020/10/01 14:08

編集2020/10/01 14:29