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>

Below is how i populate the table with 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>");
        });

The code works fine, but the problem i have is that when i select the columns to hide, only the th in the thead disappears, but the td in the tbody does not. In other words, the effect only happens on the head section and not on the body section. The tbody section remains unchanged while the thead section the column disappears.

I also noticed that when i populate the table manually without using AJAX, when i choose the column to hide, the effect happens on both the thead section and the tbody section. That means it works fine when i populate the table manually without using AJAX. I think the problem might be with the DOM.

Can anyone help me out how to sort out this problem.

Answer 1

First, append the new rows to the table body, not the table Second, after appending the rows, tell the table widget to 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