html

<table id="tableId" class="cell-border"></table>

JSONの配列を渡す

data = [
    {
        "name": "Tiger Nixon",
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25",
        "office": "Edinburgh",
        "extn": "5421"
    },
]

$("#tableId").DataTable({
    "data": data,
    columns: [
        { name: "name", data: "name", title: "Name",  },
        { name: "position", data: "position", title: "Position",  },
        { name: "salary", data: "salary", title: "Salary", },
        { name: "start_date", data: "start_date", title: "Start date",  },
        { name: "office", data: "office", title: "Office",  },
        { name: "extn", data: "extn", title: "Extn",  },
    ],
})

flask render_template を使う場合

flaskから受け取るなら、

return render_template("template.html", data)

でjsonの配列を渡して

var tableData = JSON.parse({{ data | tojson }});

で受け取る。 {{ data | tojson }} は文字列扱いになっているから JSON.parse でオブジェクト形式に変換する。

ajax

非同期処理、サーバーからデータを受け取る。

$("#tableId").DataTable({
    ajax: {url: "{{ url_for('.fetch_test') }}"},
    columns: [
        { name: "name", data: "name", title: "Name",  },
        { name: "position", data: "position", title: "position",  },
        { name: "salary", data: "salary", title: "salary", },
        { name: "start_date", data: "start_date", title: "start_date",  },
        { name: "office", data: "office", title: "office",  },
        { name: "extn", data: "extn", title: "extn",  },
    ],
})

指定したエンドポイントからは

@payslip_bp.route("/fetch_test", methods=["GET"])
def fetch_test():
    data = [
        {
            "name": "Tiger Nixon",
            "position": "System Architect",
            "salary": "$320,800",
            "start_date": "2011/04/25",
            "office": "Edinburgh",
            "extn": "5421"
        },
    ]

    return jsonify({'data': data}), 200

のようにして辞書の配列を返す。キーは columns の data に合わせる。 return jsonify({'data': data}), 200 のキーも基本的には "data" にすること。

DataTablesの初期化時に serverSide を true にしていない場合は、 url からすべてのデータを持ってくるようにする。

ajax: 'data/arrays.txt' のように文字列を指定すると、URLからファイルを読み込むようになる。詳細は https://datatables.net/examples/ajax/ を参照

データが多い場合は serverSide: true の設定を加えて、サーバー側でデータをフィルターして返すようにする。 (serverSideを参照)