jquery - 如何更新循环的 html tablesorter table 自更新表

Question

这里的新手。以下情况一直困扰着我好几天的工作。

我用 python 和烧瓶创建了一个仪表板。出于演示目的，我想使用 tablesorter 来显示系统的当前状态并每隔一秒左右更新一次表格。

现在，对于普通的 html 表，一切都可以使用以下代码按预期工作：

HTML：

<table id="table" class="tablesorter">
    <thead>
        <tr>
            <th>Total memory</th>
            <th>Used memory</th>
            <th>Free memory</th>
            <th>Available memory w/o swapping</th>
            <th>Percent used</th>
            <th>Percent free</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span id="memSizeGbUpdate">{{memConst["sizeGb"]}} GB</span></td>
            <td><span id="memUsedGbUpdate">{{mem["usedGb"]}} GB</span></td>
            <td><span id="memFreeGbUpdate">{{mem["freeGb"]}} GB</span></td>
            <td><span id="memAvailGbUpdate">{{mem["availGb"]}} GB</span></td>
            <td><span id="memPercUsedUpdate">{{mem["percUsed"]}} %</span></td>
            <td><span id="memPercFreeUpdate">{{mem["percFree"]}} %</span></td>
        </tr>
    </tbody>
</table>

JS：

$(document).ready(function(){
    setInterval(function(){
        $("#memSizeGbUpdate").load("./memory.html #memSizeGbUpdate");
        $("#memUsedGbUpdate").load("./memory.html #memUsedGbUpdate");
        $("#memFreeGbUpdate").load("./memory.html #memFreeGbUpdate");
        $("#memAvailGbUpdate").load("./memory.html #memAvailGbUpdate");
        $("#memPercUsedUpdate").load("./memory.html #memPercUsedUpdate");
        $("#memPercFreeUpdate").load("./memory.html #memPercFreeUpdate");
    },1000);
});

该表在 1 秒后更新每个变量 - 太棒了！

但是如何在 html 端使用“for”循环获得相同的结果。例如，我希望页面显示所有可用内核的 cpu 使用情况。我有一个 python 字典列表，每个字典代表有关各自核心的几个统计信息。所以我创建了这个 html "for" 循环来显示我的 CPU：

HTML：

<table id="table" class="tablesorter">
    <thead>
        <tr>
            <th>CPU utilization</th>
            <th>User time</th>
            <th>System time</th>
        </tr>
    </thead>
    <tbody>
        {%for each in cores%}
            <tr>
                <td>{{each["cpuPerc"]}}</td>
                <td>{{each["cpuUserTime"]}}</td>
                <td>{{each["cpuSysTime"]}}</td>
            </tr>
        {%endfor%}
    <tbody>
</table>

现在，问题是我根本无法弄清楚在这种情况下如何进行更新过程。我应该使用 jQuery 从头开始​​创建表吗？

感谢您的输入！

标签： jqueryajaxtablesorter

Answer 1

你可以做的是在你的控制器中添加一个简单的数字变量 i = 1 （对不起，不知道烧瓶），当你在 html 中循环时，为每个 td 添加一个类，例如：

    {%for each in cores%}
        <tr class="cpuCore">
            <td class="cpuPerc{{variablehere}}">{{each["cpuPerc"]}}</td>
            <td class="cpuUserTime{{variablehere}}">{{each["cpuUserTime"]}}</td>
            <td class="cpuSysTime{{variablehere}}">{{each["cpuSysTime"]}}</td>
        </tr>
        { increase the variable here so next time it will be say 2 instead of 1}
    {%endfor%}

然后，您可以让 jquery 查找这些类并根据它们唯一的类名更新它们。使用您提供给 tr 的类名来获取循环计数。

将您的 js 更改为：

$(document).ready(function(){
    setInterval(function(){
        $("#memSizeGbUpdate").load("./memory.html #memSizeGbUpdate");
        $("#memUsedGbUpdate").load("./memory.html #memUsedGbUpdate");
        $("#memFreeGbUpdate").load("./memory.html #memFreeGbUpdate");
        $("#memAvailGbUpdate").load("./memory.html #memAvailGbUpdate");
        $("#memPercUsedUpdate").load("./memory.html #memPercUsedUpdate");
        $("#memPercFreeUpdate").load("./memory.html #memPercFreeUpdate");
    },1000);

    //This cpuCount is used for just checking the # of cpus in the html
    var cpuCount = $(".cpuCore").length
    // I am adding 1 to the count so that the jquery can still use the correct i number set in flask to check
    cpuCount += 1
    setInterval(function() {
        // we start at i = 1 so the jquery gets the right element with the selector
        for( i = 1; i < cpuCount; i++ ) {
            if($(".cpuPerc" + i)) {
                $("cpuPerc" + i).load(//add your path here)
                // add the other two 
            }
    }, 1000);
});

只是一个可能的答案，让我知道这是否有助于您走上正轨。

编辑：

好的，因为我不确定您是否可以使用烧瓶更新 for 循环中的变量，或者我们将使用 jquery 来代替:) 基本上所有要做的就是添加我们之前要在烧瓶中使用 jquery 执行的唯一数字反而。

html:

{%for each in cores%}
    <tr class="cpuCore">
        <td>{{each["cpuPerc"]}}</td>
        <td>{{each["cpuUserTime"]}}</td>
        <td>{{each["cpuSysTime"]}}</td>
    </tr>
{%endfor%}

然后，您可以让 jquery 向每个 cpu tr 核心的 td 添加唯一的类/id 名称：

将 js 更改为：

$(document).ready(function(){
    setInterval(function(){
        $("#memSizeGbUpdate").load("./memory.html #memSizeGbUpdate");
        $("#memUsedGbUpdate").load("./memory.html #memUsedGbUpdate");
        $("#memFreeGbUpdate").load("./memory.html #memFreeGbUpdate");
        $("#memAvailGbUpdate").load("./memory.html #memAvailGbUpdate");
        $("#memPercUsedUpdate").load("./memory.html #memPercUsedUpdate");
        $("#memPercFreeUpdate").load("./memory.html #memPercFreeUpdate");
    },1000);


    var cpuCore = $(".cpuCore")
    var j = 1;
    // just looping over each of the cores (tr's) and adding a unique number to them so jquery can select them later for an ajax load
    cpuCore.each(function(idx, itm) { 
        itm.first().addClass("cpuPerc" + j);
        itm.first().next().addClass("cpuUserTime" + j);
        itm.first().next().next().addClass("cpuSysTime" + j);
    })

    // now like before we have jquery loop over them and load for them individually since they have unique classes. You can also add unique path's which I assume you have for them in your python dict
    var cpuCount = cpuCore.length;
    cpuCount += 1
    setInterval(function() {
        for( i = 1; i < cpuCount; i++ ) {
            if($(".cpuPerc" + i)) {
                $("cpuPerc" + i).load(//add your path here)
                // add the other two 
            }
    }, 1000);
});