библиотека jQuery объекты DataTable скрыть столбец


есть ли способ с плагином jQuery datatables скрыть (и показать) столбец таблицы?

Я понял, как перезагрузить данные таблицы: с помощью fnClearTable и fnAddData.

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

12 54

12 ответов:

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

fnSetColumnVis( 1, false );

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

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

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

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

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

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

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

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

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

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

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

вот Скрипка демо.

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

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

$('#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] }
    ]
});

для тех, кто использует обработку на стороне сервера и передачу значений базы данных в jQuery с помощью скрытого столбца, я предлагаю "sClass" param. Вы сможете использовать 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 также

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

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

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

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

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

здесь oTable является объектом Datatable.

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

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

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

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

Введите описание ссылки здесь

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

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

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

$(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
                },
              ]
        });
    });

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

Подробнее

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

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

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

у меня есть этот 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 вернулся что-то вроде этого

enter image description here

поэтому я хочу скрыть Id index [0] и RegistrationStatusId index [5]

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

Я надеюсь, что это поможет вам