来自熊猫数据帧的烧瓶中的动态表

问题描述

我有一个包含以下列的 Pandas 数据框

mongoose.set('useFindAndModify',false);

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

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

解决方法

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

蟒蛇：

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

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

JavaScript：

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

我添加了一个代码片段来演示这个想法。

$(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>