Я пытаюсь получить 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>