Панды в DataTable с использованием Jinja2 - PullRequest
Новая
       19

Панды в DataTable с использованием Jinja2

1 голос
/ 10 апреля 2019

Я пытаюсь получить DataTable из фрейма данных pandas. Я, вероятно, что-то напутал с javascript, так как у меня нет с этим опыта.

Вот мой app.py: 

from flask import Flask, render_template
import pandas as pd
import numpy as np

# Initialize the Flask application
app = Flask(__name__)


@app.route('/')
def index():

    x = pd.DataFrame(np.random.randn(20, 5))
    return render_template("index.html", data=x.to_html(table_id="example"))


if __name__ == '__main__':
    app.run(debug=True)

и мой index.html: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="header">
      </div>
      {% block content %}
      <div>
        {{data | safe}}
      </div>
      {% endblock %}
    </div>
    <script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {
          $('#example').DataTable();
        });
      });
    </script>
  </body>
</html>

Таблица отображается, хотя она не отображается как DataTable. Что я делаю не так?

Это исходный код, который я получаю: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="header">
      </div>

      <div>
        <table border="1" class="dataframe" id="example">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>0</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>0.018123</td>
      <td>1.079811</td>
      <td>1.066767</td>
      <td>-1.217770</td>
      <td>0.367248</td>
    </tr>
    <tr>
      <th>1</th>
      <td>-0.932686</td>
      <td>0.824856</td>
      <td>0.332361</td>
      <td>0.625047</td>
      <td>-2.732725</td>
    </tr>
    <tr>
      <th>2</th>
      <td>-0.059300</td>
      <td>-0.349141</td>
      <td>-0.530877</td>
      <td>0.000240</td>
      <td>0.632127</td>
    </tr>
    <tr>
      <th>3</th>
      <td>0.189570</td>
      <td>-2.113928</td>
      <td>-1.172503</td>
      <td>-0.766995</td>
      <td>-0.651467</td>
    </tr>
    <tr>
      <th>4</th>
      <td>0.446802</td>
      <td>1.332917</td>
      <td>-1.087676</td>
      <td>-1.172604</td>
      <td>0.838456</td>
    </tr>
    <tr>
      <th>5</th>
      <td>0.806439</td>
      <td>-0.729923</td>
      <td>0.869406</td>
      <td>2.034626</td>
      <td>-0.359677</td>
    </tr>
    <tr>
      <th>6</th>
      <td>-1.754480</td>
      <td>-1.240986</td>
      <td>-1.189522</td>
      <td>2.282419</td>
      <td>-0.190826</td>
    </tr>
    <tr>
      <th>7</th>
      <td>-0.041057</td>
      <td>-0.735124</td>
      <td>-0.055690</td>
      <td>-2.082961</td>
      <td>-0.174191</td>
    </tr>
    <tr>
      <th>8</th>
      <td>0.176996</td>
      <td>0.130762</td>
      <td>-1.810439</td>
      <td>-0.078395</td>
      <td>-0.436659</td>
    </tr>
    <tr>
      <th>9</th>
      <td>-0.260100</td>
      <td>-1.610574</td>
      <td>0.266022</td>
      <td>0.442451</td>
      <td>-1.084955</td>
    </tr>
    <tr>
      <th>10</th>
      <td>-0.101105</td>
      <td>0.436861</td>
      <td>-0.713991</td>
      <td>-0.367140</td>
      <td>-0.120851</td>
    </tr>
    <tr>
      <th>11</th>
      <td>-1.446159</td>
      <td>-0.236887</td>
      <td>-0.534796</td>
      <td>0.451110</td>
      <td>-0.791357</td>
    </tr>
    <tr>
      <th>12</th>
      <td>-0.478489</td>
      <td>1.560650</td>
      <td>-0.132928</td>
      <td>1.602959</td>
      <td>-0.208067</td>
    </tr>
    <tr>
      <th>13</th>
      <td>0.074238</td>
      <td>0.745307</td>
      <td>1.594826</td>
      <td>-0.474906</td>
      <td>1.017512</td>
    </tr>
    <tr>
      <th>14</th>
      <td>0.729890</td>
      <td>-0.372248</td>
      <td>-0.906112</td>
      <td>0.682203</td>
      <td>0.776891</td>
    </tr>
    <tr>
      <th>15</th>
      <td>-1.144816</td>
      <td>0.963095</td>
      <td>0.018222</td>
      <td>0.015175</td>
      <td>1.860865</td>
    </tr>
    <tr>
      <th>16</th>
      <td>-0.742524</td>
      <td>0.933160</td>
      <td>2.537095</td>
      <td>-2.049826</td>
      <td>-2.259178</td>
    </tr>
    <tr>
      <th>17</th>
      <td>-0.798230</td>
      <td>-0.270186</td>
      <td>-0.571847</td>
      <td>0.754217</td>
      <td>-0.875143</td>
    </tr>
    <tr>
      <th>18</th>
      <td>0.539820</td>
      <td>0.902537</td>
      <td>-1.934890</td>
      <td>0.704921</td>
      <td>0.563974</td>
    </tr>
    <tr>
      <th>19</th>
      <td>0.990986</td>
      <td>-0.403316</td>
      <td>-1.638532</td>
      <td>1.075618</td>
      <td>-0.668676</td>
    </tr>
  </tbody>
</table>
      </div>

    </div>
    <script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {
          $('#example').DataTable();
        });
      });
    </script>
  </body>
</html>

1 Ответ

0 голосов
/ 10 апреля 2019

В вашем JavaScript есть синтаксическая ошибка: 

$(document).ready(function() {
  $('#example').DataTable();
});
}); // <--- remove this

После удаления того, что DataTable создается должным образом, см. Фрагмент кода ниже: 

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="header">
    </div>

    <div>
      <table border="1" class="dataframe" id="example">
        <thead>
          <tr style="text-align: right;">
            <th></th>
            <th>0</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>0</th>
            <td>0.018123</td>
            <td>1.079811</td>
            <td>1.066767</td>
            <td>-1.217770</td>
            <td>0.367248</td>
          </tr>
          <tr>
            <th>1</th>
            <td>-0.932686</td>
            <td>0.824856</td>
            <td>0.332361</td>
            <td>0.625047</td>
            <td>-2.732725</td>
          </tr>
          <tr>
            <th>2</th>
            <td>-0.059300</td>
            <td>-0.349141</td>
            <td>-0.530877</td>
            <td>0.000240</td>
            <td>0.632127</td>
          </tr>
          <tr>
            <th>3</th>
            <td>0.189570</td>
            <td>-2.113928</td>
            <td>-1.172503</td>
            <td>-0.766995</td>
            <td>-0.651467</td>
          </tr>
          <tr>
            <th>4</th>
            <td>0.446802</td>
            <td>1.332917</td>
            <td>-1.087676</td>
            <td>-1.172604</td>
            <td>0.838456</td>
          </tr>
          <tr>
            <th>5</th>
            <td>0.806439</td>
            <td>-0.729923</td>
            <td>0.869406</td>
            <td>2.034626</td>
            <td>-0.359677</td>
          </tr>
          <tr>
            <th>6</th>
            <td>-1.754480</td>
            <td>-1.240986</td>
            <td>-1.189522</td>
            <td>2.282419</td>
            <td>-0.190826</td>
          </tr>
          <tr>
            <th>7</th>
            <td>-0.041057</td>
            <td>-0.735124</td>
            <td>-0.055690</td>
            <td>-2.082961</td>
            <td>-0.174191</td>
          </tr>
          <tr>
            <th>8</th>
            <td>0.176996</td>
            <td>0.130762</td>
            <td>-1.810439</td>
            <td>-0.078395</td>
            <td>-0.436659</td>
          </tr>
          <tr>
            <th>9</th>
            <td>-0.260100</td>
            <td>-1.610574</td>
            <td>0.266022</td>
            <td>0.442451</td>
            <td>-1.084955</td>
          </tr>
          <tr>
            <th>10</th>
            <td>-0.101105</td>
            <td>0.436861</td>
            <td>-0.713991</td>
            <td>-0.367140</td>
            <td>-0.120851</td>
          </tr>
          <tr>
            <th>11</th>
            <td>-1.446159</td>
            <td>-0.236887</td>
            <td>-0.534796</td>
            <td>0.451110</td>
            <td>-0.791357</td>
          </tr>
          <tr>
            <th>12</th>
            <td>-0.478489</td>
            <td>1.560650</td>
            <td>-0.132928</td>
            <td>1.602959</td>
            <td>-0.208067</td>
          </tr>
          <tr>
            <th>13</th>
            <td>0.074238</td>
            <td>0.745307</td>
            <td>1.594826</td>
            <td>-0.474906</td>
            <td>1.017512</td>
          </tr>
          <tr>
            <th>14</th>
            <td>0.729890</td>
            <td>-0.372248</td>
            <td>-0.906112</td>
            <td>0.682203</td>
            <td>0.776891</td>
          </tr>
          <tr>
            <th>15</th>
            <td>-1.144816</td>
            <td>0.963095</td>
            <td>0.018222</td>
            <td>0.015175</td>
            <td>1.860865</td>
          </tr>
          <tr>
            <th>16</th>
            <td>-0.742524</td>
            <td>0.933160</td>
            <td>2.537095</td>
            <td>-2.049826</td>
            <td>-2.259178</td>
          </tr>
          <tr>
            <th>17</th>
            <td>-0.798230</td>
            <td>-0.270186</td>
            <td>-0.571847</td>
            <td>0.754217</td>
            <td>-0.875143</td>
          </tr>
          <tr>
            <th>18</th>
            <td>0.539820</td>
            <td>0.902537</td>
            <td>-1.934890</td>
            <td>0.704921</td>
            <td>0.563974</td>
          </tr>
          <tr>
            <th>19</th>
            <td>0.990986</td>
            <td>-0.403316</td>
            <td>-1.638532</td>
            <td>1.075618</td>
            <td>-0.668676</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
  <script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#example').DataTable();
    });
  </script>
</body>

</html>
...