来自熊猫数据框的烧瓶中的动态表答案

【问题标题】：dynamic table in flask from pandas dataframe来自熊猫数据框的烧瓶中的动态表
【发布时间】：2021-06-27 00:09:25
【问题描述】：

我有一个带有以下列的 pandas 数据框

Symbol, Rate, volume

此表中有 100 行。我想在网页上显示它（使用烧瓶）并提供一个选项来为每一列排序=>符号按字母顺序，速率和体积数字。

你能给我一些关于最简单的方法的建议吗？我对 Javascript 不是很熟悉，但我相信如果你指出一个示例代码，我将能够集成它

【问题讨论】：

标签： pandas flask dynamic-tables

【解决方案1】：

使用添加自定义类的to_html() 函数转换数据框。将 index 参数设置为 False 将在输出中提交数据帧的索引：

Python：

df.to_html(classes=["sortable"], index=False) # produces a string with the HTML table

使用flask将表格从后端传递到前端后，将表格写入所需的页面。使用tablesorter 允许在单击列时对其进行排序：

JavaScript：

  $(".dataframe.sortable").tablesorter();

我添加了一个代码 sn-p 来演示这个想法。

$(document).ready(function(){
  $(".dataframe.sortable").tablesorter();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>

<table border="1" class="dataframe sortable">
  <thead>
    <tr style="text-align: left; cursor: pointer;">
      <th>ID</th>
      <th>Age</th>
      <th>Sex</th>
      <th>Values</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>18</td>
      <td>Male</td>
      <td>1200</td>
    </tr>
    <tr>
      <td>2</td>
      <td>18</td>
      <td>Male</td>
      <td>200</td>
    </tr>
    <tr>
      <td>3</td>
      <td>19</td>
      <td>Female</td>
      <td>300</td>
    </tr>
    <tr>
      <td>4</td>
      <td>19</td>
      <td>Female</td>
      <td>400</td>
    </tr>
    <tr>
      <td>5</td>
      <td>20</td>
      <td>Male</td>
      <td>500</td>
    </tr>
    <tr>
      <td>6</td>
      <td>21</td>
      <td>Female</td>
      <td>600</td>
    </tr>
  </tbody>
</table>

【讨论】：