CODEWITHSUNDEEP
htmljquery-mobilehtml-table
sioesi
sioesi

Reputation: 517

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.

Upvotes: 0

Views: 41

Answers (1)

ezanker
ezanker

Reputation: 24738

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>

Upvotes: 1

Related Questions