Скрыть столбец jquery

Ответ 1

Скрывать столбцы можно с помощью этой команды:

fnSetColumnVis( 1, false );

Где первый параметр - индекс столбца, а второй параметр - видимость.

Через: http://www.datatables.net/api - функция fnSetColumnVis

Ответ 2

если кто-то снова сюда попадет, это сработало для меня...

"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }]

Ответ 3

Скрыть столбцы динамически

В предыдущих ответах используется устаревший синтаксис DataTables. В версии 1.10+ вы можете использовать column().visible():

var dt = $('#example').DataTable();
//hide the first column
dt.column(0).visible(false);

Чтобы скрыть несколько столбцов, columns().visible() можно использовать:

var dt = $('#example').DataTable();
//hide the second and third columns
dt.columns([1,2]).visible(false);

Вот демонстрация скриптов.

Скрыть столбцы при инициализации таблицы

Чтобы скрыть столбцы при инициализации таблицы, вы можете использовать опцию columns:

$('#example').DataTable( {
    'columns' : [
        null,
        //hide the second column
        {'visible' : false },
        null,
        //hide the fourth column
        {'visible' : false }
    ]
});

Для вышеуказанного метода вам нужно указать null для столбцов, которые должны оставаться видимыми и не иметь других параметров столбца. Или вы можете использовать columnDefs для таргетинга на определенный столбец:

$('#example').DataTable( {
    'columnDefs' : [
        //hide the second & fourth column
        { 'visible': false, 'targets': [1,3] }
    ]
});

Ответ 4

Вы можете определить это во время инициализации datatable

"aoColumns": [{"bVisible": false},null,null,null]

Ответ 5

Для тех, кто использует обработку на стороне сервера и передает значения базы данных в jQuery, используя скрытый столбец, я предлагаю параметр "sClass". Вы сможете использовать css display: none, чтобы скрыть столбец, сохраняя при этом его значение.

css:

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

В datatables init:

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

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

Ответ 6

Вы можете попробовать как показано ниже, чтобы скрыть/показать динамическое время выполнения

Скрыть:   fnSetColumnVis (1, false, false);
  

Пример: oTable.fnSetColumnVis(item, false, false);

Показать: fnSetColumnVis (1, true, false);
 

Пример: oTable.fnSetColumnVis(item, false, false);

Здесь oTable - объект Datatable.

Ответ 7

Если вы используете данные из json и Datatable v 1.10.19, вы можете сделать это:

Больше информации

$(document).ready(function() {
     $('#example').dataTable( {

        columns= [
          { 
           "data": "name_data",
           "visible": false
           }
        ]
  });
});

Ответ 8

$(document).ready(function() {
$('#example').DataTable( {
    "columnDefs": [
        {
            "targets": [ 2 ],
            "visible": false,
            "searchable": false
        },
        {
            "targets": [ 3 ],
            "visible": false
        }
    ]
});});

Ответ 9

С помощью api вы можете использовать

var table = $('#example').DataTable();

table.column( 0 ).visible( false );

Посмотрите эту информацию:

введите ссылку здесь

Ответ 10

Примечание: принятое решение теперь устарело и часть устаревшего кода. http://legacy.datatables.net/ref Решения могут быть неприемлемыми для тех, кто работает с новыми версиями DataTables (теперь это наследие) Для более нового решения: вы можете использовать: https://datatables.net/reference/api/columns().visible()

альтернативы вы могли бы реализовать кнопку: https://datatables.net/extensions/buttons/built-in посмотрите последнюю опцию по ссылке, которая позволяет иметь кнопку, которая может переключать видимость столбца.

Ответ 11

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

$(document).ready(function() {
        $('#example').dataTable({
            "scrollY": "500px",
            "scrollCollapse": true,
            "scrollX": false,
            "bPaginate": false,
            "columnDefs": [
                { 
                    "width": "30px", 
                    "targets": 0,
                },
                { 
                    "width": "100px", 
                    "targets": 1,
                },
                { 
                    "width": "100px", 
                    "targets": 2,
                },              
                { 
                    "width": "76px",
                    "targets": 5, 
                },
                { 
                    "width": "80px", 
                    "targets": 6,
                },
                {
                    "targets": [ 7 ],
                    "visible": false,
                    "searchable": true
                },
                {
                    "targets": [ 8 ],
                    "visible": false,
                    "searchable": true
                },
                {
                    "targets": [ 9 ],
                    "visible": false,
                    "searchable": true
                },
              ]
        });
    });

Ответ 12

var example = $('#exampleTable').DataTable({
    "columnDefs": [
        {
            "targets": [0],
            "visible": false,
            "searchable": false
        }
    ]
});

Атрибут Target определяет положение столбца. Атрибут Visible, отвечающий за видимость столбца. Атрибут Searchable, отвечающий за средство поиска. Если установлено значение false, столбец не работает с поиском.

Ответ 13

взгляните на мое решение

У меня есть этот HTML table Head

<thead>
    <tr>
        <th style="width: 20%">@L("Id")</th>
        <th style="width: 20%">@L("IdentityNumber")</th>
        <th style="width: 20%">@L("Name")</th>
        <th style="width: 20%">@L("MobileNumber")</th>
        <th style="width: 20%">@L("RegistrationStatus")</th>
        <th style="width: 20%">@L("RegistrationStatusId")</th>
        <th style="width: 20%; text-align: center;" data-hide="phone">@L("Actions")</th>
    </tr>
</thead>

и мой Ajax request возвратил что-то вроде этого

поэтому я хочу скрыть индекс индекса [0] и RegistrationStatusId [5]

$(document).ready(function() {
    $('#example').dataTable( {
        "columnDefs": [
            { "aTargets": [0, 5], "sClass": "invisible"},// here is the tricky part
        ]
    });
});

Надеюсь, это поможет вам.