JQuery DataTables скрыть столбец, не удаляя его из DOM

Мне нужно скрыть столбец от отображения в jQuery datatables. Когда я скрываю столбец, используя свойство bVisible, он исчезает из DOM.

Я хочу, чтобы свойство отображения ячеек таблицы столбца равно none, чтобы значения не отображались в представлении, но они все равно должны присутствовать в DOM, поскольку столбец, который я скрываю, однозначно идентифицирует строку, и мне нужно узнайте уникальный идентификатор в строке выбора. Как достичь этого.

Я заполняю таблицу, используя свойство aaData, используя разбиение на страницы сервера.

Посмотрел на этот вопрос, но эти параметры удаляют его из DOM. jquery datatables скрыть столбец

Ответ 1

Вы должны использовать className вместе с columnDefs или columns,

Определите класс hide_column в вашем CSS, например

.hide_column {
    display : none;
}

У вас есть два способа назначить класс .hide_column:

Использовать columnDefs (назначить собственный класс для первого столбца):

$('#example').dataTable( {
  "columnDefs": [
    { className: "hide_column", "targets": [ 0 ] }
  ]
} );

ИЛИ columns

$('#example').dataTable( {
  "columns": [
    { className: "hide_column" },
    null,
    null,
    null,
    null
  ]
} );

фрагменты кода, сделанные отсюда

Старый ответ

Попробуйте добавить

"sClass": "hide_column"

который должен сделать этот столбец скрытым...

Ответ 2

Чтобы ответить на вопрос Даниила:

css:

th.hide_me, td.hide_me {display: none;}

В datatables init:

"aoColumnDefs": [ { "sClass": "hide_me", "aTargets": [ 0 ] } ] // first column in visible columns array gets class "hide_me"

Не забудьте также добавить свой скрытый класс в свою ячейку thead:

<thead>
    <th class="hide_me">First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
</thead>

Это также полезная стратегия, если вы используете обработку на стороне сервера и хотите передавать данные из источника ajax, не видя этого в datatable. Вы все равно сможете получить значение столбца на интерфейсе, не показывая его. Полезно для фильтрации с помощью значений скрытых данных и т.д.

Пример:

// In datatables init file
<script>
    var filteredValues = [];
    $('td.your_filtering_class').each(function(){
        var someVariable = $(this).find('.hide_me').html();
        filteredValues.push(someVariable);
    }
</script>

Ответ 3

Если вы хотите скрыть несколько столбцов:

$('#example').dataTable({
  "columnDefs": [{ 
    "targets": [0,1,3], //Comma separated values
    "visible": false,
    "searchable": false }
  ]
});

Ответ 4

это мой вклад для u.

Не уверен, что код правильный, но его работа.

Если у меня есть более одного столбца установки, такого как я.

$('#example').dataTable( {
  "columnDefs": [ {
        "targets"  : 'no-sort',
        "orderable": false,
        "order": [],
    }],
    "columnDefs": [ {
        "targets"  : 'hide_column',
        "orderable": false,
        "order": [],
        "visible": false
    }]
} );

Ответ 5

Вы можете использовать метод hide.

$(element).hide();

Чтобы показать элемент, используйте метод show:

$(element).show();

Чтобы получить нужный столбец, вы можете использовать селектор n-th child из jquery.