JQuery Mobile table toggle column - jquery-mobile

Question

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?

Answer 1

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