Question

我试图在动态HTML表格上使用tablesorter。当表中的数据发生变化，并且我尝试排序时，表格会混乱;它添加了以前的数据和当前数据，并将它们组合成一个表，并且它还对其他表进行排序!!当表格更改时，我怎样才能这样做，tablesorter会更新？我使用jQuery从.csv填充表，并且表是动态的，因为表所在的HTML页面有多个文件名，如果单击一个，则该文件中的数据将被加载到表

我使用多个表和一个tableorter，但这是我的一个表：

<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： 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");
});

EDIT2

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脚本在另一个文件上，则没有问题。

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

1 个答案:

修改

EDIT2