JQM対応テーブルの問題

Question

<table data-role="table" id="statement" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Headings" data-column-popup-theme="a"> 
<thead> 
    <tr class="ui-bar-d"> 
    <th data-priority="1">Category</th> 
    <th data-priority="5">Date</th> 
    <th data-priority="1">Debit</th> 
    <th data-priority="1">Credit</th> 
    <th data-priority="1">Balance</th> 
    </tr> 
</thead> 
<tbody> 
</tbody> 
</table> 

以下は、テーブルにAJAXを挿入する方法です。

$.each(data, function(index, item) { 
     $("#statement").append("<tr>"+ 
          "<td>" + item.category + "</td>"+ 
          "<td>" + item.transaction_date + "</td>"+ 
          "<td>" + item.debit + "</td>"+ 
          "<td>" + item.credit + "</td>"+ 
          "<td>" + item.Balance + "</td>"+ 
          "</tr>"); 
     }); 

コードが正常に動作しますが、私は持っている問題は、私は非表示にする列を選択した場合、thead要素で唯一番目は消えますが、TBODYでTDにはないということです。言い換えれば、効果はヘッドセクションでのみ発生し、ボディセクションでは発生しません。 tbodyセクションは変更されず、theadセクションは列が消えます。

また、AJAXを使わずにテーブルを手動で作成すると、非表示にする列を選択すると、theadセクションとtbodyセクションの両方で効果が発生することに気付きました。つまり、AJAXを使用せずに手動でテーブルを作成するとうまく動作します。問題はDOMにあると思う。

この問題を解決する方法を教えてもらえますか？

Answer 1

まず、テーブル本体ではなく、テーブル 第二に新しい行を追加し、行を追加した後、教えてテーブルウィジェットへrebuild

$.each(data, function(index, item) { 
    $("#statement tbody").append("<tr>"+ 
           "<td>" + item.category + "</td>"+ 
           "<td>" + item.transaction_date + "</td>"+ 
           "<td>" + item.debit + "</td>"+ 
           "<td>" + item.credit + "</td>"+ 
           "<td>" + item.Balance + "</td>"+ 
           "</tr>"); 
    }); 
    $("#statement").table("rebuild"); 

DEMO