Javascript Jquery表分拣机，分拣只工作一次

单击标签时，我会显示动态数据，这与table sorter配合良好。单击表格标题将对表格行进行排序

我面临的问题是，在单击标签“一”然后单击标签“二”并尝试对第二个响应中的数据进行排序后，它将从此处停止工作

这是我的代码：

$(document).on("click", ".candlespattern", function() {

    var clicked = $(this).attr("id");
    var datatoselect = '';

    if (clicked === 'one') {
        datatoselect = myjsonresponse1;
    } else if (clicked === 'two') {
        datatoselect = myjsonresponse2;
    }

    var html = "";
    html += '<thead><th class="thheaders">Symbol</th><th class="thheaders">Date</th></thead><tbody>';
    for (var e = 0; e < datatoselect.length; e++) {
        html += "<tr><td>" + datatoselect[e].name + "</td><td>" + datatoselect[e].date_time + "</td></tr>"
    }

    $("#candletable").html(html);

    $('#candletable').tablesorter({}).tablesorterPager({
        container: $(".pager"),
        size: 20
    });
    $("#candletable").trigger("update");

    $("#pager").show();
});

$（document）.on（“click”，“.candlespattern”，function（））{
var clicked=$（this.attr（“id”）；
var datatoselect=''；
如果（单击=='one'）{
datatoselect=myjsonresponse1；
}else if（单击==='two'）{
datatoselect=myjsonresponse2；
}
var html=“”；
html+='SymbolDate'；
对于（var e=0；e

---

好的，在研究了这个特定的插件之后，我发现了一个。 首先，您的问题很可能是每次单击项目时都会覆盖表的

thead

，导致插件丢失一些引用。以下是我建议您的做法：

由于两个响应的

thead

是相同的，因此无需每次动态添加，我们只需将其放入HTML：

<table id="candletable" class="table table-striped tablesorter">
    <!-- add the table head and an empty tbody -->
    <thead>
        <th class="thheaders">Symbol</th>
        <th class="thheaders">Date</th>
    </thead>
    <tbody>
    </tbody>
</table>

最后，我们从单击处理程序中删除

thead

数据和初始化，并将创建的表行添加到

tbody

：

$(document).on("click", ".candlespattern", function() {

    var clicked = $(this).attr("id");
    var datatoselect = '';

    if (clicked === 'one') {
        datatoselect = myjsonresponse1;
    } else if (clicked === 'two') {
        datatoselect = myjsonresponse2;
    }

    // create the table rows from the response
    var html = ""; 
    for (var e = 0; e < datatoselect.length; e++) {
        html += "<tr><td>" + datatoselect[e].name + "</td><td>" + datatoselect[e].date_time + "</td></tr>"
    }

    // add the rows to table body
    $("#candletable tbody").html(html);

    // update the table
    $("#candletable").trigger("update");

    // show it
    $("#pager").show();
});

$（document）.on（“click”，“.candlespattern”，function（））{
var clicked=$（this.attr（“id”）；
var datatoselect=''；
如果（单击=='one'）{
datatoselect=myjsonresponse1；
}else if（单击==='two'）{
datatoselect=myjsonresponse2；
}
//从响应创建表行
var html=“”；
对于（var e=0；e

---

非常感谢，非常好，请告诉我如何在表格标题中显示排序图标。如果更改标题上的类名，则需要修改css。请注意，演示使用的是我的tablesorter，而这个答案引用的是原始插件-有一些细微的区别，比如。

$(document).on("click", ".candlespattern", function() {

    var clicked = $(this).attr("id");
    var datatoselect = '';

    if (clicked === 'one') {
        datatoselect = myjsonresponse1;
    } else if (clicked === 'two') {
        datatoselect = myjsonresponse2;
    }

    // create the table rows from the response
    var html = ""; 
    for (var e = 0; e < datatoselect.length; e++) {
        html += "<tr><td>" + datatoselect[e].name + "</td><td>" + datatoselect[e].date_time + "</td></tr>"
    }

    // add the rows to table body
    $("#candletable tbody").html(html);

    // update the table
    $("#candletable").trigger("update");

    // show it
    $("#pager").show();
});