javascript - 如何更新动态表中的tablesorter onclick？

Question

我正在尝试在动态 HTML 表上使用 tablesorter。当表中的数据发生变化时，我尝试排序，表会变得困惑；它将以前的数据和当前的数据相加，并将它们合并到一个表中，并且还对其他表进行排序!我怎样才能使表更改时，表排序器也会更新？我使用 jQuery 从 .csv 填充表格，并且表格是动态的，因为表格所在的 HTML 页面有多个文件名，如果单击其中一个，该文件中的数据将加载到该表格

我正在使用多个表和一个表排序器，但这是我的一个表:

<div id="origtable">
    <table border="1" id="table_side">
        <thead>
            <tr>
              <th>Origin <br> Country</th>

              <th>Count</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>    
</div>

这是我的表格排序器:

/* tried this at first because I'm waiting for data from .csv file to populate table
setInterval(function(){sortStuff()},1000);
    function sortStuff(){
        $("table").tablesorter({ 
        sortList: [[1,1]]
        });
        $("table").trigger("update");
    }
*/
$(document).ready(function(){
    $("table").tablesorter({ 
        sortList: [[0,1]]
        });
    });

    $("table").on( "click", function() {
    $("table").trigger("update");
});

编辑1:jquery 函数用于在读取 .csv 后填充 html 表(此 jquery 代码位于单独的 .js 文件中)

function populateTableCounts(rowkey, tablename, hashdata)
    {
        var rowhtml = "";
        $.each(hashdata, function (key, value) {
             key = key.replace(/-/g, ' / ');
             key = key.replace(/:/g, ' , ');

             var rowdata=countrow.replace('$row_key', key);
             rowdata=rowdata.replace('$row_val', value);

            //add row <tr> to var rowhtml   
            rowhtml += rowdata;          
        });

        //append populated rowhtml to TBODY
        $('#' + tablename + ' tbody').append(rowhtml);
    }

Answer 1

忽略我的评论是触发(“更新”)您需要的功能，但检查此代码是否有效

$(document).ready(function(){
     $("table").tablesorter({ 
           sortList: [[0,1]]
     });

     $("table").click(function(){ $("table").trigger("update"); });
});

编辑

如果你使用 get 来获取 csv 数据，你需要这样的东西:

$.get("your/csv/file.csv",function(csv){
   //... code that handle your csv and put into table
   //...

   //AT END UPDATE TABLE
   $("table").trigger("update");
});

编辑2

function populateTableCounts(rowkey, tablename, hashdata)
{
    var rowhtml = "";
    $.each(hashdata, function (key, value) {
         key = key.replace(/-/g, ' / ');
         key = key.replace(/:/g, ' , ');

         var rowdata=countrow.replace('$row_key', key);
         rowdata=rowdata.replace('$row_val', value);

        //add row <tr> to var rowhtml   
        rowhtml += rowdata;          
    });

    //append populated rowhtml to TBODY
    $('#' + tablename + ' tbody').append(rowhtml);

    //You can do this
    $('#' + tablename).trigger("update");

    //or this if you want $('table').trigger('update');
}

您可以毫无问题地执行此操作，您需要注意必须加载元素，以便在 $(document).ready 上执行所有操作。

如果js脚本在其他文件上也没有问题。