How to set default value of Column-Toggle Table Widget for a column?

Question

I have been toying around with the Table Widget for jQuery Mobile. Is there a way I can set the show-hide status of a column from its table header name via this widget? If t

Answer 1

Add the class "ui-table-cell-hidden" to the table header tag.

In this below example, the forth column will be hidden by default.

<thead>
    <tr>
        <th data-priority="1" width="20%">Category</th>
        <th data-priority="2" width="45%">Title</th>
        <th data-priority="3" width="15%">Amount</th>
        <th data-priority="4" width="20%" class="ui-table-cell-hidden">Action</th>
    </tr>
</thead>

Answer 2

jQM doesn't offer an out-of-the-box solution for this, therefore, you have to do it through JS. The column toggle popup inherits table's id followed by -popup. You need to target it when tablecreate event fires to change checkbox(es) property.

Note that only thead elements with data-priority will be added to column toggle popup. Moreover, you will need to target checkbox(es) by their index using .eq() method or :eq() selector.

$(document).on("pagebeforecreate", "#pageID", function () {
   $("#tableID").on("tablecreate", function () {
       $("#tableID-popup [type=checkbox]:eq(1)") /* second checkbox */
           .prop("checked", false)            /* uncheck it */
           .checkboxradio("refresh")          /* refresh UI */
           .trigger("change");                /* trigger change to update table */
   });
});

Demo