jquery 移动 table 自定义

Question

我正在创建一个 table，我想显示和隐藏各个列。我无法实现的是所有列都出现并且用户可以显示或隐藏类似内容。

<table border="0" id="proforma" data-role="table" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-button-theme="b" data-column-btn-theme="b" data-column-btn-text="Ver más" data-column-popup-theme="b">
  <thead>
    <tr class="ui-bar-d">
      <th class="header_table cliente_table">Cliente</th>
      <th class="header_table real_table">Real (%)</th>
      <th class="header_table proy_table">Proy (%)</th>
      <th class="header_table falta_table">Falta (M$)</th>
      <th class="header_table cod_table" data-priority="5">Código</th>
      <th class="header_table dato_table" data-priority="6">Dirección</th>
    </tr>
  </thead>
</table>

在这 6 列中，我想第一次出现前 4 列，最后两列始终隐藏。但是通过按下按钮显示/隐藏，还会出现前 4 个，为用户提供我无法获得的选项。

Answer 1

切换列表中仅包含具有数据优先级的列，因此将数据优先级 1 添加到前四列：

<table border="0" id="proforma" data-role="table" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-button-theme="b" data-column-btn-theme="b" data-column-btn-text="Ver más" data-column-popup-theme="b">
  <thead>
    <tr class="ui-bar-d">
      <th class="header_table cliente_table" data-priority="1">Cliente</th>
      <th class="header_table real_table" data-priority="1">Real (%)</th>
      <th class="header_table proy_table" data-priority="1">Proy (%)</th>
      <th class="header_table falta_table" data-priority="1">Falta (M$)</th>
      <th class="header_table cod_table" data-priority="5">Código</th>
      <th class="header_table dato_table" data-priority="6">Dirección</th>
    </tr>
  </thead>
</table>

jquery 移动 table 自定义

jquery mobile table custom

html

html-table

jquery-mobile