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

Question

我正在尝试在动态 HTML 表上使用 tablesorter。当表中的数据发生变化，我尝试排序时，表就乱了；它将以前的数据和当前的数据相加并合并到一个表中，它还在对其他表进行排序！！当表格更改时，我怎样才能做到这一点，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>

这是我的 tablesorter：

/* 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： 从 .csv 读取后用于填充 html 表的 jquery 函数（此 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脚本在另一个文件上也没问题。