jQuery mobile tables set default view

Question

Кто-нибудь знает, как настроить таблицу переключения столбцов jQuery для мобильных устройств, чтобы при загрузке страницы пользователем по умолчанию отображались только определенные столбцы? Например, столбцы 1-6 видны, но столбец 7 не отображается и должен быть включен с помощью кнопки выбора столбца.

Вот мой project example

<thead> 
    <tr> 
     <th data-priority="1">Date</th> 
     <th>Client</th> 
     <th data-priority="2">Dates and Times Needed</th> 
     <th data-priority="3">Caregiver In Mind</th> 
     <th data-priority="4">Notes</th> 
     <th data-priority="5">Comunication</th> 
     <th data-priority="6">Unable Reason</th> <!-- Want this column to be hidden by default --> 
    </tr> 
    </thead> 

Answer 1

Эта функциональность не встроена в виджете, так что вы должны кодировать его самостоятельно.

Вот один из способов:

Это расширяет Omars ответ здесь: How to set default value of Column-Toggle Table Widget for a column?, чтобы добавить атрибут в столбце (ы) вы хотите скрыты.

В таблице <thead> добавьте новый атрибут данных для столбцов, которые должны быть сначала спрятаны. В моем примере data-hiddendefault="true":

<thead> 
    <tr> 
     <th data-priority="2">Date</th> 
     <th>Client</th> 
     <th data-priority="3">Dates and Times Needed</th> 
     <th data-priority="1">Caregiver In Mind</th> 
     <th data-priority="3">Notes</th> 
     <th data-priority="3">Comunication</th> 
     <th data-priority="3" data-hiddendefault="true">Unable Reason</th> 
    </tr> 
    </thead> 

Затем добавить сценарий к tablecreate события. Сначала мы получаем идентификатор столбца для переключения всплывающего окна (таблица id + '-popup'). Затем перебирайте все заголовки столбцов и найдите те, у которых есть приоритет данных, поскольку они являются единственными, которые появляются в столбце для переключения всплывающего окна. Теперь проверьте, если новый атрибут для скрытия столбца есть, и если да, то установите его флажок во всплывающем окне бесконтрольно, обновите флажок виджет, и вызвать событие изменения чекбокса:

$('[data-mode="columntoggle"]').on('tablecreate', function(event, ui) { 
    var id = this.id + "-popup"; 
    var $cols = $(this).find("thead th"); 
    var idx = 0; 
    $cols.each(function(index){ 
     if ($(this).jqmData("priority")){     
      if ($(this).jqmData("hiddendefault") == true) { 
       $("#" + id + " [type=checkbox]:eq(" + idx + ")").prop("checked", false).checkboxradio("refresh").trigger("change"); 
      } 
      idx++; 
     } 
    }); 
}); 

Вот ваш обновленный FIDDLE