Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как скрыть колонку в таблице, не удаляя (https://javascript.ru/forum/jquery/76943-kak-skryt-kolonku-v-tablice-ne-udalyaya.html)

alex-romanov 02.03.2019 09:15

Как скрыть колонку в таблице, не удаляя
 
Как скрыть колонку в таблице, не удаляя ее из DOM-структуры ?

Например, рисуется таблица, после получения данных от сервера,
затем указанный столбец или несколько в разных местах таблицы (не обязательно по порядку) - скрывается, а все остальные сдвигаются, к тому месту откуда был удален столбец. И в конечном итоге клиент видит таблицу и не подозревает, что один или несколько отсутствует.

Но в DOM-дереве, эти столбцы должны остаться каждый на своем месте,
чтобы при парсинге данных ячеек, объект JSON был правильно составлен, каждое поле с данными было на своем месте,
иначе сервер не примет данные , так как там будут отсуствовать скрытые поля.

такая ситуация происходит при применении плагина DataTables

columnDefsForDataTables: [
            {targets: [2], visible: false}, /*скрыть указанный столбец*/



столбец скрывается и невидим не только клиенту, но и исчезает из DOM-структуры документа.

Как можно исправить ситуацию ?

Russo 02.03.2019 12:01

Можно присвоить свойство display: none;

рони 02.03.2019 12:22

Russo,
мысль верная, но можно код?

Russo 02.03.2019 14:17

Я, с этим плагином не знаком. В опциях ищите присвоение класса колонкам. А в css создаете класс со свойством display: none;

alex-romanov 06.03.2019 20:44

из скрипта который задает настройки для плагина

columnDefsForDataTables: [
            {targets: [2], className: "classVisible"}, /*скрыть указанный столбец*/
            {targets: [6], width: '10px', class: 'tdControl'},
            {targets: [7], width: '10px', class: 'tdControl'},
            {targets: [8], width: '30px', class: 'tdControl'}
        ],


затем назначаю стиль
applyStyle('.classVisible',{
                'display': 'none'
            });
  /*Применение стиля*/
        function applyStyle(selector, style) {
            $(selector).css(style);
        }


работает только такая опция

className: ""


class: "" - не воспринимается плагином

Вопрос решен, почти.
Если таблица работает в постраничном режиме, тогда при переходе на другую страницу, ячейки съезжают с данными.
То есть ячейка скрытая на первой странице, на следующей странице появляется под другой колонкой.

alex-romanov 06.03.2019 21:03

решается так

selectorTableForDataTables = $(selectorTable).DataTable({...})


После привязки плагина к таблице, получим контекст таблицы, под управлением данного плагина (если неправильно комментирую поправьте).
Данный контекст имеет свою область действия, если назначать свои стили или события напрямую к селекторам элементов, то при листании страниц таблицы ничего не заработает.

Затем из этого контекста получаем селектор
applyStyle(table.$('.classVisible'),{
                'display': 'none'
            });


Правда не все проблемы можно решить через контекст, у меня не получилось.

Заголовок таблицы не исчезает, соответственно все это бесполезно.

рони 06.03.2019 21:19

Цитата:

Сообщение от alex-romanov
затем назначаю стиль

а нельзя просто css добавить, без всяких applyStyle

alex-romanov 06.03.2019 21:42

Цитата:

Сообщение от рони (Сообщение 504466)
а нельзя просто css добавить, без всяких applyStyle


можно, просто у меня этот метод используется для массива стилей, так почему не использовать раз он есть

рони 06.03.2019 21:49

Цитата:

Сообщение от alex-romanov
так почему не использовать

Цитата:

Сообщение от alex-romanov
то при листании страниц таблицы ничего не заработает.

:-?


Часовой пояс GMT +3, время: 04:42.