Q&A
ご回答ありがとうございます。
言われた通りjQuery本体を入れてみたのですが変わりませんでした。
前提・実現したいこと
jQueryのdatatablesが上手く行きません。
<link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> については反応しているのですが、CDNを利用してjQueryを入れようとすると <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script> <script> jQuery(function($){ $("#base-table").DataTable(); }); </script>が反応しません。なぜでしょうか。
該当のソースコード
html
1index.html 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="UTF-8"> 6 <title>Baseball Date_game</title> 7 <mata name="description" content="野球データを使ったシミュレーションゲームです"> 8 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css"> 9</head> 10<body> 11 <fieldset> 12 <legend>自チームを選ぼう</legend> 13 <form method="post" action="/"> 14 <label for="year">年代を選択</label> 15 <select id="year" name="year"> 16 <option name="year" value="2005">2005年</option> 17 <option name="year" value="2006">2006年</option> 18 <option name="year" value="2007">2007年</option> 19 <option name="year" value="2008">2008年</option> 20 <option name="year" value="2009">2009年</option> 21 <option name="year" value="2010">2010年</option> 22 <option name="year" value="2011">2011年</option> 23 <option name="year" value="2012">2012年</option> 24 <option name="year" value="2013">2013年</option> 25 <option name="year" value="2014">2014年</option> 26 <option name="year" value="2015">2015年</option> 27 <option name="year" value="2016">2016年</option> 28 <option name="year" value="2017">2017年</option> 29 <option name="year" value="2018">2018年</option> 30 <option selected name="year" value="2019">2019年</option> 31 </select> 32 <label><input type="radio" name="team" value="h">ソフトバンク</label> 33 <label><input type="radio" name="team" value="l">西武</label> 34 <label><input type="radio" name="team" value="e">楽天</label> 35 <label><input type="radio" name="team" value="m">ロッテ</label> 36 <label><input type="radio" name="team" value="f">日本ハム</label> 37 <label><input type="radio" name="team" value="bs">オリックス</label> 38 <label><input type="radio" name="team" value="c">広島</label> 39 <label><input type="radio" name="team" value="db">横浜</label> 40 <label><input type="radio" name="team" value="g">巨人</label> 41 <label><input type="radio" name="team" value="t">阪神</label> 42 <label><input type="radio" name="team" value="s">ヤクルト</label> 43 <label><input type="radio" name="team" value="d">中日</label> 44 </fieldset> 45 <div><input type="submit" value="決定"></div> 46 </form> 47 <table id='base-table' class="table table-bordered"> 48 <thead> 49 <tr>{%- for i in players_columns %}<th>{{ i|e }}</th>{%- endfor %}</tr> 50 </thead> 51 <tbody> 52 {%- for i in players_values %} 53 <tr><th>{{ players_index[loop.index0]|e }}</th>{% for j in i %}<td>{{ j|e }}</td>{% endfor %}</tr> 54 {%- endfor %} 55 </tbody> 56 </table> 57 <script src="https://code.jquery.com/jquery-3.5.1.slim.js" 58 integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" 59 crossorigin="anonymous"></script> 60 <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script> 61 <script> 62 $(document).ready( function () { 63 $("#base-table").DataTable(); 64 }); 65 </script> 66</body>
python
1app.py 2import os 3from flask import Flask, render_template,request 4import base_ball 5app = Flask(__name__) 6 7@app.route('/',methods=["GET","POST"]) 8def index(): 9 if request.method == 'POST': 10 year = request.form.get('year','') 11 team = request.form.get('team','') 12 print(year,team) 13 if year == '2019' and team == 'bs': 14 players = base_ball.data_load(year,'b') 15 else: 16 players = base_ball.data_load(year,team) 17 if int(year) >= 2011 and team == 'db': 18 players = base_ball.data_load(year,'yb') 19 else: 20 players = base_ball.data_load(year,team) 21 #players = base_ball.data_load(year,team) 22 players_values = players.values.tolist() 23 players_columns = players.columns.tolist() 24 players_index = players.index.tolist() 25 return render_template('index.html', \ 26 players_values = players_values, \ 27 players_columns = players_columns, \ 28 players_index = players_index) 29 return render_template('index.html') 30 31if __name__ == '__main__': 32 app.run(debug=True, host='127.0.0.1',port=5000,threaded=True)
python
1base_ball.py 2from IPython import get_ipython 3import random 4import matplotlib.pyplot as plt 5import numpy as np 6import pandas as pd 7import sys 8#野手データ取得 9def data_load(year,team): 10 BASE_URL = ("http://npb.jp/bis/{}/stats/idb1_{}.html".format(year,team)) 11 dfs = pd.io.html.read_html(BASE_URL) 12#カラムの再設定 13 df = dfs[0][1:]; df.columns=dfs[0].loc[0,:] 14 new_header = df.iloc[0] 15 df = df[1:] 16 df.columns = new_header 17 df2 = df.rename(columns=lambda s: str(s).replace(" ","")) 18 df_i = df2.rename(columns=lambda s: str(s).replace(" ","")) 19 del df_i['nan'] 20 df3 = df_i.set_index('選手') 21 return df3
回答2件
0
jQuery本体を読み込んでないからでは？
投稿2020/06/29 07:27
総合スコア116724
0
ベストアンサー
(datatables紹介したのに)最初がわかりにくくて申し訳ないです。
ManualにjQuery1.7以降が必要と記載されていますので、以下の様にjQueryを読み込んでください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>examples</title> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css"> </head> <body> <table id="table_id" class="display"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <td>Row 1 Data 1</td> <td>Row 1 Data 2</td> </tr> <tr> <td>Row 2 Data 1</td> <td>Row 2 Data 2</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script> <script> $(document).ready( function () { $('#table_id').DataTable(); } ); </script> </body> </html>
投稿2020/06/29 08:32
総合スコア2424
新しく投稿されたコードを確認しました。
HTMLが間違っているのが原因です。
tableのヘッダが１列足りません。
tableのヘッダが足りない以外にもHTMLが崩れているので、ご確認いただき修正ください。
【お願い】
提示のコードだと、確認するのにかなり時間がかかりました。
質問するときは、現象が再現する最小限のコードを提供ください。
今回の場合、pythonは不要で、HTMLだけ提供いただければ確認できます。
また、pythonが必要な場合は、pythonのバージョンとrequirements.txtなども添付ください。
すみません色々書いている内に複雑になってしまいました。
tableのヘッダを直した所無事解決できました。
本当にありがとうございました。
次回からは簡潔に書く様にしたいと思います。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/29 10:24
2020/06/29 10:32
2020/06/29 11:56
2020/06/29 12:00
2020/06/29 12:17