【JQuery】Ajax で動的に登録・更新・削除した後に DataTables にデータを再表示する

Javascript, Python, 開発

おはようございます。

昨日に引き続き、DataTables を利用したページの作成をしていきます。

今回はデータを登録・更新・削除した後、データを再取得して DataTables をリロードする方法を試してみます。

プログラムは前回のものを流用します。

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

スポンサーリンク

画面の修正

主な変更点

1.CSSを外出し
2.検索用コントロールのスタイル変更
3.登録、更新用のモーダルダイアログ(Bootstrap)を追加

static/css/style.css

 

templates/index.html

プログラムの修正

クライアント

主な変更点

1.テーブル行クリック時に行のスタイル(クラス)を変更する
2.各種ボタン(登録・更新・削除)クリック時の処理を追加
3.ダイアログの各種ボタン(登録・更新)クリック時の処理(Ajax)を追加

static/js/script.js

サーバー

主な変更点

1.MySQLUtilクラスを追加してデータ操作の処理をまとめる
2.登録・更新・削除に対応するメソッドの追加

MySQLUtil.py

 

Main.py

操作してみる

検索

検索後の画面
検索後の画面

登録

登録ダイアログ
登録ダイアログ

親画面の「登録」ボタンをクリックで表示。

内容を入力してダイアログの「登録」ボタンをクリック。

登録後
登録後

No5にデータが追加されました。ちゃんと件数表示も更新されています。

更新

更新ダイアログ
更新ダイアログ

親画面で No5 を選択後「更新」ボタンをクリックで表示。内容は一度DBに問い合わせてフォームにセットしています。

種別を変更して「修正」ボタンをクリック。

更新後
更新後

一覧の種別も変更されました。

削除

削除
削除

No5 を選択して「削除」ボタンをクリック。

削除後
削除後

No5 が一覧から削除されました。

まとめ

ちょっと長くなってしまいましたが、一通り、DataTables と サーバーとの通信はできましたね。

ここまで出来れば、ちょっとしたシステムにも組み込むことができそうです。

DataTablesはまだまだ色々出来そうなので、また時間が出来たら試してみたいと思います。

ではでは。

 

スポンサーリンク


関連するコンテンツ

Javascript, Python, 開発DataTables, JQuery

Posted by doradora