CODEWITHSUNDEEP
jquery-mobilehtml-tabletoggle
Zero_73
Zero_73

Reputation: 183

JQuery Mobile table toggle column

I'm using JQuery Mobile 1.4. How can I set the column hide or unchecked on table load.

Here is part of my code:

<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">


  <thead>
       <th>Movie Title</th>   
       <th data-priority="1">Rank</th>
       <th data-priority="2">Reviews</th>
    <thead>
    <tbody>
     ....
    </tbody> </table>

How do I hide the Reviews column on default or unchecked it in Column option?

Upvotes: 1

Views: 1519

Answers (1)

ezanker
ezanker

Reputation: 24738

There is probably an easier way, but this will work:

Given your table markup:

<table data-role="table" id="myTable" data-mode="columntoggle" class="ui-responsive table-stroke">
    <thead>
        <tr>
            <th>Movie Title</th>
            <th data-priority="1">Rank</th>
            <th data-priority="2">Reviews</th>
        </tr>
    </thead>
    <tbody>
    ...
    </tbody>
</table>

jQM will create a column toggle popup with 2 checkboxes, one for rank and one for reviews. Because you did not assign a data-priority to movie title, it is not allowed to be hidden. The popup takes the id of the table plus '-popup', so in my exaample we can find the checkboxes in the created popup with the following selector:

$("#myTable-popup .ui-checkbox label")

As you want to hide the Reviews column by default, we can simply trigger the click event on the second checkbox at pagecreate time:

$(document).on("pagecreate", "#page1", function(){
    $("#myTable-popup .ui-checkbox label")[1].click();
});

Here is a working DEMO

Upvotes: 1

Related Questions