библиотека jQuery объекты DataTable скрыть столбец
есть ли способ с плагином jQuery datatables скрыть (и показать) столбец таблицы?
Я понял, как перезагрузить данные таблицы: с помощью fnClearTable
и fnAddData
.
но моя проблема заключается в том, что в одном из моих представлений для таблицы (например, скрытый режим) я не хочу показывать определенные столбцы.
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
вернулся что-то вроде этогопоэтому я хочу скрыть Id index [0] и RegistrationStatusId index [5]
$(document).ready(function() { $('#example').dataTable( { "columnDefs": [ { "aTargets": [0, 5], "sClass": "invisible"},// here is the tricky part ] }); });
Я надеюсь, что это поможет вам