Nico Hernandez Torres Nico Hernandez Torres - 3 months ago 27
HTML Question

jquery mobile table custom

I am creating a table and I would like to show and hide individual columns. What I could not achieve is that all columns appear and the user can show or hide the like.



<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>





Of these 6 columns I would like to appear for the first time the first 4, the last two always hidden. But by pressing the button to show / hide, appear also the first 4 to give the user the option that is not what I could get.

Answer

Only columns with a data priority are included in the toggle list, so add a data-priority of 1 to the first four columns:

<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>
Comments