【JQuery】DataTables に Ajax で動的に取得したデータを表示する

Javascript, Python, 開発

おはようございます。

なんと、約4ヶ月ぶりのプログラム記事です。
いつの間にそんなに時間が経ってしまったのか。。

ということで、
久しぶりのプログラムは以前少し触ってほったらかしにしていた、JQueryプラグイン「DataTables」の話し。

今回は条件を指定して検索などを実施して得たデータを動的に DataTables に設定する方法を試してみました。

以前までのプログラムは次の記事を参照してください。

【JQuery】PythonサーバーでMySQLに接続して DataTable にデータを表示する

スポンサーリンク

画面の修正

大きく変更はありませんが、検索するためのテキストボックス及びボタンの配置、Javascriptの外出しをしました。(あとファイル名の変更)

templates/index.html

プログラムの修正

クライアント

static/js/script.js

ポイント

1.「ajax」オプションでページ読み込み時にサーバーサイドの「/init」メソッド呼び出し
2.「ajax」オプションの「data」に、サーバーへ送信するパラメータの設定をしておく
3.なぜか「serverSide」を「true」にすると、件数が正しく表示されかったりページングやソートが動かなかったり(それらもサーバーサイドでやれということなのかな?)
4.検索ボタン押下時に、urlの設定及び、ajaxのリロードを行うことでデータが再設定できる

といったところですかね。

サーバー

Main.py

主な変更点

1.InitHandlerメソッドを追加し、空のリストを返却(初期表示用)
2.SearchHandlerメソッドで、クライアントから送られたパラメータを利用して検索するように

起動してみる

初期表示
初期表示

初期表示はデータが表示されていない状態。

名前の指定をしないで検索ボタンをクリックします。

全件検索
全件検索

全件が表示されます。

名前指定検索
名前指定検索

「そ」を指定して検索をすると、「そら」のデータが表示されました。

期待通りの動きですね。

まとめ

調べると色々とサンプルが出てくるものの、微妙にやりたい事と違っていたり、動作がおかしくてハマったりしました。

ひとまずこの方法で進めていこうかな。

次回はデータの追加・更新・削除なんかをやる予定です。

ではでは。

 

スポンサーリンク


関連するコンテンツ

Javascript, Python, 開発DataTables, JQuery

Posted by doradora