javascript - Flask/Jinja - 单击或计时器上的渲染选项卡，无需刷新页面

Question

我有一个带有 Jinja 模板的 Flask 服务器，它正在跟踪网络 PC 的当前状态。下面是设置的屏幕截图。

顶部的每个仪表代表该工作组上的活跃客户端数量，但也是一个仅查看该工作组的过滤器。

每个仪表代表一个UITab。当我单击仪表时，它会将我带到选项卡，并使用 Jinja 比较来检查它是否属于选项卡的表格。

问题 - 我想动态更新页面，而不刷新。目前，仪表将上下调节，动态没有问题，但数据表无法正确重新渲染。

如果我将工作站从 workgroup01 移动到 workgroup02，仪表将受到限制，但行项目不会移动到正确的表格。我在仪表计时器上使用 AJAX，但我需要以某种方式重新触发 computer.current_workgroup == workgroup 检查，以便获取表上的动态更新

这可能与 Jinja 有关吗？还是我必须编写一个很长的自定义函数才能做到这一点？出于后勤原因，我试图避免定制工作。

这里是一些与文档流相关的相关代码，我已尝试删除非必要代码，如果需要更多代码，请告诉我。

index.html

<div id="tabs" >
    <ul id="gaugeList">
        {% for workgroup in context['workgroup_list'] %}
            <li><h3>
                <a class="gaugeCell" id="{{ workgroup }}"
                   href="#tabs-{{ workgroup.name }}">

                <script type="text/javascript">
                    //  The  gauges
                </script>
                </a></h3></li>
        {% endfor %}
    </ul>

    {% for workgroup in context['workgroup_list'] %}

    <div id="tabs-{{ workgroup.name }}" class="scrollable">

        <table class="tablesorter">

            <thead>
            <!-- Header stuff -->
            </thead>

            <tbody id="{{workgroup.name}}_table" class="table_body">
                {% for computer in context['computer_list'] %}


                {% if (computer.current_workgroup == workgroup.shorthand) or (workgroup.name == 'All') %}

                <tr id="{{computer.name}}" class="parent">
                <td>
                <-- TD's for table --> 
                </td>




            {% endif %}
            {% endfor%}
            </tbody>

        </table>
        </div>


    {% endfor %}

有什么想法吗？感谢您的阅读

Answer 1

我不相信它可以直接使用jinja2来实现，我会创建一个额外的 Controller ，仅返回表格的HTML(没有html、标题、正文标签等)，为此你可以使用jinja2 模板。

如果你有这个，使用jquery的.load()，你可以每n秒从这个 Controller 获取数据并从主页更新适当的div。 http://api.jquery.com/load/