JQM 响应式表问题

Posted 2023-05-09

【中文标题】JQM 响应式表问题

【英文标题】：JQM responsive table issue

【发布时间】：2017-04-10 20:24:33

【问题描述】：

<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 中的 th 消失，但 tbody 中的 td 没有。换句话说，效果只发生在头部而不是身体部分。 tbody 部分保持不变，而 thead 部分列消失。

我还注意到，当我在不使用 AJAX 的情况下手动填充表格时，当我选择要隐藏的列时，效果会同时发生在 thead 部分和 tbody 部分。这意味着当我在不使用 AJAX 的情况下手动填充表格时它可以正常工作。我认为问题可能出在 DOM 上。

谁能帮我解决这个问题。

【问题讨论】：

谁能帮帮我。我一直在尝试解决这个问题。

【参考方案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