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

2018年7月29日2019年4月11日Javascript,Python,開発

おはようございます。

DataTablesを試しているのですが、
せっかくなのでデータベースから取得したデータを表示してみようかと思います。
手っ取り早く Python ＋ MySQL で実装します。

プロジェクトは新規で作成しますが、
PythonやMySQLについては過去記事を参考にしていただければ。

1. 新規プロジェクトの作成
2. パッケージのインストール
3. 画面の作成
4. プログラム
5. 起動してみる
6. まとめ

新規プロジェクトの作成

新たにサンプル用プロジェクトを作成します。

PyCharmを起動し、上部メニューの「File」＞「New Project」を選択し、
ウィザードに沿ってプロジェクトを新規作成します。

フォルダ構成は次の通りとします。

DataTableSample
│ Main.py
│
└─templates
Main.html

パッケージのインストール

Tornado、MySQL接続用のパッケージをインストールします。

「File」>「Default Settings…」メニューを選択します。

プロジェクトを選択し、右側にある「＋」ボタンをクリックします。

検索欄に「tornado」と入力、表示されたパッケージを選択し、「Install Package」ボタンをクリックします。

先ほどと同様、「mysql-connector-python-rf」パッケージをインストールします。

以上で事前準備は完了です。

画面の作成

前回、単純にHTMLで作成したものを流用します。

Main.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>DataTableサンプル</title>
		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

		<style>
			.container {
				border: 1px solid black;
				padding: 1rem;
				margin: 1rem;
			}
		</style>
	</head>
	<body>
		<div class="container container-fluid">
			<table id="myTable" class="table table-striped tagle-bordered">
				<thead>
					<tr>
						<th>No</th>
						<th>名前</th>
						<th>性別</th>
						<th>年齢</th>
						<th>種別</th>
						<th>好物</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<th>No</th>
						<th>名前</th>
						<th>性別</th>
						<th>年齢</th>
						<th>種別</th>
						<th>好物</th>
					</tr>
				</tfoot>
			</table>
		</div>
	</body>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>

	<script>
		$(document).ready( function () {
			
			$('#myTable').DataTable({
				'processing'  : true,
        		'serverSide'  : true,
				'ajax'        : {
					'url'  : '/search',
					'type' : 'POST'
				},
				'columns'     : [
					{ 'data' : 'no' },
					{ 'data' : 'name' },
					{ 'data' : 'sex' },
					{ 'data' : 'age' },
					{ 'data' : 'kind_name' },
					{ 'data' : 'favorite' },
				]
			});
		} );
	</script>
</html>

<!DOCTYPE html>

<head>

<title>DataTableサンプル</title>

<style>

.container {

border:1pxsolidblack;

padding:1rem;

margin:1rem;

}

</style>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

</div>

</body>

$(document).ready(function(){

$('#myTable').DataTable({

'processing' :true,

'serverSide' :true,

'ajax' :{

'url' :'/search',

'type':'POST'

'columns' :[

{'data':'no'},

{'data':'name'},

{'data':'sex'},

{'data':'age'},

{'data':'kind_name'},

{'data':'favorite'},

]

});

</script>

</html>

べた書きしていたテーブルの内容を削除し、
ページ表示時に、サーバーからデータを取得するように javascript の部分を変更しています。

プログラム

Main.py

import json
import logging
import os
import tornado.ioloop
import mysql.connector

from tornado.web import RequestHandler
from tornado.options import options
from contextlib import closing


class MainHandler(RequestHandler):
    """
    画面表示
    """

    def get(self):
        logging.info("MainHandler [get]")

        self.render("Main.html")


class SearchHandler(RequestHandler):
    """
    データ検索
    """

    def post(self):
        """
        データをJSON形式で返します
        :return:
        """
        logging.info("SearchHandler [post]")

        with closing(mysql.connector.connect(
            host="localhost",
            port="3306",
            user="USER01",
            password="USER01",
            database="DB01"
        )) as conn:

            c = conn.cursor(dictionary=True)

            # SQL組み立て
            sql = "SELECT C.NO, C.NAME, C.SEX, C.AGE, C.KIND_CD, K.KIND_NAME, C.FAVORITE FROM TBLCAT C"
            sql += " LEFT OUTER JOIN MSTKIND K ON ( C.KIND_CD = K.KIND_CD)"

            list = []
            c.execute(sql)
            for r in c.fetchall():
                list.append({
                    "no": r['NO'],
                    "name": r['NAME'],
                    "sex": r['SEX'],
                    "age": r['AGE'],
                    "kind_name": r['KIND_NAME'],
                    "favorite": r['FAVORITE'],
                })
        result = {
            'draw': 1
            , 'recordsTotal': 4
            , 'recordsFiltered': 4
            , 'data': list
        }

        self.write(json.dumps(result, ensure_ascii=False))


app = tornado.web.Application([
    (r"/", MainHandler),
    (r"/search", SearchHandler),
],
    template_path=os.path.join(os.getcwd(), "templates"),
    static_path=os.path.join(os.getcwd(), "static"),
)

if __name__ == "__main__":
    options.parse_command_line()
    app.listen(8080)
    logging.info("server started")
    tornado.ioloop.IOLoop.instance().start()

importjson

importlogging

importos

importtornado.ioloop

importmysql.connector

fromtornado.web importRequestHandler

fromtornado.options importoptions

fromcontextlibimportclosing

classMainHandler(RequestHandler):

"""

画面表示

"""

defget(self):

logging.info("MainHandler [get]")

self.render("Main.html")

classSearchHandler(RequestHandler):

"""

データ検索

"""

defpost(self):

"""

データをJSON形式で返します

:return:

"""

logging.info("SearchHandler [post]")

withclosing(mysql.connector.connect(

host="localhost",

port="3306",

user="USER01",

password="USER01",

database="DB01"

))asconn:

c=conn.cursor(dictionary=True)

# SQL組み立て

sql="SELECT C.NO, C.NAME, C.SEX, C.AGE, C.KIND_CD, K.KIND_NAME, C.FAVORITE FROM TBLCAT C"

sql+=" LEFT OUTER JOIN MSTKIND K ON ( C.KIND_CD = K.KIND_CD)"

list=[]

c.execute(sql)

forrinc.fetchall():

list.append({

"no":r['NO'],

"name":r['NAME'],

"sex":r['SEX'],

"age":r['AGE'],

"kind_name":r['KIND_NAME'],

"favorite":r['FAVORITE'],

})

result={

'draw':1

,'recordsTotal':4

,'recordsFiltered':4

,'data':list

}

self.write(json.dumps(result,ensure_ascii=False))

app=tornado.web.Application([

(r"/",MainHandler),

(r"/search",SearchHandler),

template_path=os.path.join(os.getcwd(),"templates"),

static_path=os.path.join(os.getcwd(),"static"),

)

if__name__=="__main__":

options.parse_command_line()

app.listen(8080)

logging.info("server started")

tornado.ioloop.IOLoop.instance().start()

MySQLからデータを取得して、JSON形式で返却するようにしています。

若干はまったのが、
JSONの形式で、「data」のキーに表示するデータのリストを設定しないと表示ができなかったところですかね。
そのほかのキーについてはちょっと検証していません。

起動してみる

無事にデータが表示されました。

まとめ

サーバー側との通信もJSONで行えるので便利ですね。
（最近そんなのばかりですが）

気が向いたら、検索やデータ追加、更新なんかもやってみようかと思います。

ではでは。

2018年7月29日2019年4月11日Javascript,Python,開発DataTables,Javascript,JQuery,JQueryプラグイン,MySQL,Python,プラグイン

Posted by doradora