動的に構築されたテーブルでjQueryテーブルソーターが壊れています

Question

テーブルを動的に構築する必要がありますが、ソートすることも必要です。

私は多くの他のテーブルで作業しているtablesorterを持っていましたが、それらは静的テーブルです。 Ajaxで受け取ったデータを使用して動的に構築されたテーブルで動作するようにはできません。私が使用しているtablesorterフォークのconfirmed by the maintainerです。

JSFiddleに小さなデモを作成しました。

これを動的テーブルをソートする方法やバグですか？私はtablesorterプラグインとjQuery 1.10.1の最新リリースを使用しています。

EDITS：
1）私はまた、$('myTable').trigger('destroy');を呼び出し、それが上記updateAllを使用するので置き換える再初期化しようとしました。
2）テーブルソースプラグインを初期化するためにテーブルを作成してから待っていました。

Answer 1

@ T.Shahが述べたように、theadでは、thがtrの外側に追加されています。

tblHead.append('<th>...</th>'); 

の変更は、これらのライン上のビルドテーブルコードは、それが動作する（demo）を作るために：th年代はtheadではなく、このコードでtrに追加されているので、これが起こっている

// Begin the row 
var html = '<tr>'; 

// Fill the table header (thead) row 
for (var i = 0; headerColumns.length - 1 >= i; i++) { 
    var id = headerColumns[i]['id']; 
    var value = headerColumns[i]['value']; 

    // Check to see if this column has an average avalible for it 
    if (averages[id]) { 
    value = 'Average: ' + averages[id] + '<br />' + value; 
    } 

    // Write the table head data 
    html += '<th id="' + id + '"' + '>' + value + '</th>'; 
} 

// End the row 
tblHead.append(html + '</tr>'); 

<tbody> で

、行を追加するためのHTMLが間違っている、それは</tr>

tblBody.append('<tr id="tblRow' + key + '"></td>'); 

で終わらなければなりません

代わりに、行を構築するために、文字列を使用します。

html = ""; 
// Fill the table body (tbody) with all required rows of data 
for (var key in reportData) { 
    // Some object properties are inherited, we don't want these 
    if (!reportData.hasOwnProperty(key)) { 
    continue; 
    } 

    // Create a new table body row 
    html += '<tr id="tblRow' + key + '">'; 

    // Apply data to each column in the row 
    for (var i = 0; reportData[key].length - 1 >= i; i++) { 
    var id = reportData[key][i]['id']; 
    var value = reportData[key][i]['value']; 

    // Write the column data 
    html += '<td id="' + id + '"' + '>' + value + '</td>'; 
    } 
    html += '</tr>'; 
} 
tblBody.append(html); 

そして、「すべて更新」をトリガーします。

文字列を使用してHTMLを構築するのは、できるだけDOMとやり取りしてパフォーマンスを向上させる方が良いからです。各要素を追加する代わりに、HTML文字列を作成して1回追加するか、この例では2回追加します.1回はthead、もう1回はtbodyです。