質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.10%

jQueryのデータテーブル化について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 104

HaTea

score 10

前提・実現したいこと

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>
が反応しません。なぜでしょうか。

該当のソースコード

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Baseball Date_game</title>
  <mata name="description" content="野球データを使ったシミュレーションゲームです">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
</head>
<body>
  <fieldset>
    <legend>自チームを選ぼう</legend>
    <form method="post" action="/">
      <label for="year">年代を選択</label>
      <select id="year" name="year">
        <option name="year" value="2005">2005年</option>
        <option name="year" value="2006">2006年</option>
        <option name="year" value="2007">2007年</option>
        <option name="year" value="2008">2008年</option>
        <option name="year" value="2009">2009年</option>
        <option name="year" value="2010">2010年</option>
        <option name="year" value="2011">2011年</option>
        <option name="year" value="2012">2012年</option>
        <option name="year" value="2013">2013年</option>
        <option name="year" value="2014">2014年</option>
        <option name="year" value="2015">2015年</option>
        <option name="year" value="2016">2016年</option>
        <option name="year" value="2017">2017年</option>
        <option name="year" value="2018">2018年</option>
        <option selected name="year" value="2019">2019年</option>
      </select>
      <label><input type="radio" name="team" value="h">ソフトバンク</label>
      <label><input type="radio" name="team" value="l">西武</label>
      <label><input type="radio" name="team" value="e">楽天</label>
      <label><input type="radio" name="team" value="m">ロッテ</label>
      <label><input type="radio" name="team" value="f">日本ハム</label>
      <label><input type="radio" name="team" value="bs">オリックス</label>
      <label><input type="radio" name="team" value="c">広島</label>
      <label><input type="radio" name="team" value="db">横浜</label>
      <label><input type="radio" name="team" value="g">巨人</label>
      <label><input type="radio" name="team" value="t">阪神</label>
      <label><input type="radio" name="team" value="s">ヤクルト</label>
      <label><input type="radio" name="team" value="d">中日</label>
    </fieldset>
    <div><input type="submit" value="決定"></div>
    </form>
    <table id='base-table' class="table table-bordered">
      <thead>
        <tr>{%- for i in players_columns %}<th>{{ i|e }}</th>{%- endfor %}</tr>
      </thead>
      <tbody>
        {%- for i in players_values %}
        <tr><th>{{ players_index[loop.index0]|e }}</th>{% for j in i %}<td>{{ j|e }}</td>{% endfor %}</tr>
        {%- endfor %}
      </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 () {
        $("#base-table").DataTable();
    });
  </script>
</body>
app.py
import os
from flask import Flask, render_template,request
import base_ball
app = Flask(__name__)

@app.route('/',methods=["GET","POST"])
def index():
    if request.method == 'POST':
        year = request.form.get('year','')
        team = request.form.get('team','')
        print(year,team)
        if year == '2019' and team == 'bs':
            players = base_ball.data_load(year,'b')
        else:
            players = base_ball.data_load(year,team)
        if int(year) >= 2011 and team == 'db':
            players = base_ball.data_load(year,'yb')
        else:
            players = base_ball.data_load(year,team)
        #players =  base_ball.data_load(year,team)
        players_values = players.values.tolist()
        players_columns = players.columns.tolist()
        players_index = players.index.tolist()
        return render_template('index.html', \
            players_values = players_values, \
            players_columns = players_columns, \
            players_index = players_index)
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True, host='127.0.0.1',port=5000,threaded=True)
base_ball.py
from IPython import get_ipython
import random
import matplotlib.pyplot as plt
import numpy as np
import pandas as pd
import sys
#野手データ取得
def data_load(year,team):
    BASE_URL = ("http://npb.jp/bis/{}/stats/idb1_{}.html".format(year,team))
    dfs = pd.io.html.read_html(BASE_URL)
#カラムの再設定
    df = dfs[0][1:]; df.columns=dfs[0].loc[0,:]
    new_header = df.iloc[0]
    df = df[1:]
    df.columns = new_header
    df2 = df.rename(columns=lambda s: str(s).replace(" ",""))
    df_i = df2.rename(columns=lambda s: str(s).replace(" ",""))
    del df_i['nan']
    df3 = df_i.set_index('選手')
    return df3
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

jQuery本体を読み込んでないからでは?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/06/29 20:56

    <script src="https://code.jquery.com/jquery-3.5.1.slim.js"
    integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM="
    crossorigin="anonymous"></script>
    こちらを追加しました。

    キャンセル

  • 2020/06/29 21:00

    そうじゃなくて「{%- %}」的な表記部分がjsではないなにかで書いているのですよね?
    それが回答者の環境では確認ができないので、何がどうかどうしないかわからないのです。

    キャンセル

  • 2020/06/29 21:17

    理解できていませんでした、すみません。
    今ソースコードを追加しました。

    キャンセル

checkベストアンサー

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 19:19

    ご回答ありがとうございます。
    言われた通りjQuery本体を入れてみたのですが変わりませんでした。

    キャンセル

  • 2020/06/30 13:18

    新しく投稿されたコードを確認しました。
    HTMLが間違っているのが原因です。
    tableのヘッダが1列足りません。
    tableのヘッダが足りない以外にもHTMLが崩れているので、ご確認いただき修正ください。


    【お願い】
    提示のコードだと、確認するのにかなり時間がかかりました。
    質問するときは、現象が再現する最小限のコードを提供ください。
    今回の場合、pythonは不要で、HTMLだけ提供いただければ確認できます。
    また、pythonが必要な場合は、pythonのバージョンとrequirements.txtなども添付ください。

    キャンセル

  • 2020/06/30 23:40

    すみません色々書いている内に複雑になってしまいました。
    tableのヘッダを直した所無事解決できました。
    本当にありがとうございました。
    次回からは簡潔に書く様にしたいと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる