如何使用Pandas和Flask在多个标签页分别展示不同DataFrame结果表格

问题根因 #

• 后端传递参数时将两个表格的HTML内容都存入了safetytable数组，没有单独拆分RAG对应表格的传递变量
• 前端模板第二个标签页遍历的ragtable变量后端没有传入，第一个标签页遍历了包含两个表格的safetytable，自然两个表格都会显示在第一个标签页

解决方案 #

方案1：拆分传递变量（更易维护） #

第一步：修改Python后端传参逻辑

不要把两个表格都塞到同一个数组里，拆分两个变量分别传递：

return render_template(
    "drugsafety.html", 
    # 第一个标签页对应表格
    safety_table=filtered.to_html(classes='data', index=False),
    # 第二个标签页对应表格
    rag_table=ragfiltered.to_html(classes='data', index=False),
    titles=['na', 'First', 'Second'], 
    value=drugnames
)

第二步：修改HTML模板渲染逻辑

不需要循环遍历，直接把对应表格放到对应标签页即可：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Drug Safety</a></li>
        <li><a href="#tabs-2">RAG</a></li>
    </ul>
    <div id="tabs-1">
        <div class="table_container">
            {{titles[1]}}
            {{ safety_table|safe }}
        </div>
    </div>
    <div id="tabs-2">
        <div class="table_container">
            {{titles[2]}}
            {{ rag_table|safe }}
        </div>    
    </div>
</div>

方案2：不修改后端代码，仅调整前端取值逻辑 #

如果不想修改后端传参结构，直接在前端按数组下标取值即可，不用循环遍历：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Drug Safety</a></li>
        <li><a href="#tabs-2">RAG</a></li>
    </ul>
    <div id="tabs-1">
        <div class="table_container">
            {{titles[1]}}
            {{ safetytable[0]|safe }}
        </div>
    </div>
    <div id="tabs-2">
        <div class="table_container">
            {{titles[2]}}
            {{ safetytable[1]|safe }}
        </div>    
    </div>
</div>

内容的提问来源于stack exchange，提问作者Dave