Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.03.2019, 08:15
Аспирант
Отправить личное сообщение для alex-romanov Посмотреть профиль Найти все сообщения от alex-romanov
 
Регистрация: 02.02.2019
Сообщений: 67

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

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

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

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

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



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

Как можно исправить ситуацию ?
Ответить с цитированием
  #2 (permalink)  
Старый 02.03.2019, 11:01
Интересующийся
Отправить личное сообщение для Russo Посмотреть профиль Найти все сообщения от Russo
 
Регистрация: 26.02.2019
Сообщений: 10

Можно присвоить свойство display: none;
Ответить с цитированием
  #3 (permalink)  
Старый 02.03.2019, 11:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,328

Russo,
мысль верная, но можно код?
Ответить с цитированием
  #4 (permalink)  
Старый 02.03.2019, 13:17
Интересующийся
Отправить личное сообщение для Russo Посмотреть профиль Найти все сообщения от Russo
 
Регистрация: 26.02.2019
Сообщений: 10

Я, с этим плагином не знаком. В опциях ищите присвоение класса колонкам. А в css создаете класс со свойством display: none;
Ответить с цитированием
  #5 (permalink)  
Старый 06.03.2019, 19:44
Аспирант
Отправить личное сообщение для alex-romanov Посмотреть профиль Найти все сообщения от alex-romanov
 
Регистрация: 02.02.2019
Сообщений: 67

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

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 в 19:50.
Ответить с цитированием
  #6 (permalink)  
Старый 06.03.2019, 20:03
Аспирант
Отправить личное сообщение для alex-romanov Посмотреть профиль Найти все сообщения от alex-romanov
 
Регистрация: 02.02.2019
Сообщений: 67

решается так

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


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

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


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

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

Последний раз редактировалось alex-romanov, 06.03.2019 в 20:05.
Ответить с цитированием
  #7 (permalink)  
Старый 06.03.2019, 20:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,328

Сообщение от alex-romanov
затем назначаю стиль
а нельзя просто css добавить, без всяких applyStyle
Ответить с цитированием
  #8 (permalink)  
Старый 06.03.2019, 20:42
Аспирант
Отправить личное сообщение для alex-romanov Посмотреть профиль Найти все сообщения от alex-romanov
 
Регистрация: 02.02.2019
Сообщений: 67

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

можно, просто у меня этот метод используется для массива стилей, так почему не использовать раз он есть
Ответить с цитированием
  #9 (permalink)  
Старый 06.03.2019, 20:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,328

Сообщение от alex-romanov
так почему не использовать
Сообщение от alex-romanov
то при листании страниц таблицы ничего не заработает.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как скрыть дубли? Globus Общие вопросы Javascript 5 03.08.2018 00:04
Как скрыть часть номера телефона? LADYX Элементы интерфейса 24 16.07.2018 12:23
Скрыть одинаковые в таблице M@x Элементы интерфейса 7 08.12.2015 13:50
Пытаюсь сделать слайдер. Подскажите как скрыть стрелки в нем. umbabaraumba Элементы интерфейса 0 13.02.2014 18:26
Как скрыть обработчик HTML-формы с помошью JavaScript? Мишаня Общие вопросы Javascript 5 15.06.2009 04:40