jQuery datatables скрыть столбец
есть ли способ с плагином jQuery datatables скрыть (и показать) столбец таблицы?
Я понял, как перезагрузить данные таблицы: используя fnClearTable
и fnAddData
.
но моя проблема в том, что в одном из моих представлений для таблицы (например, скрытый режим) я не хочу показывать определенные столбцы.
12 ответов
вы можете скрыть столбцы с помощью этой команды:
fnSetColumnVis( 1, false );
где первый параметр-индекс столбца, а второй параметр-видимость.
Via:http://www.datatables.net/api - функция fnSetColumnVis
если кто-нибудь снова попадет сюда, это сработало для меня...
"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }]
вы можете определить это во время инициализации datatable
"aoColumns": [{"bVisible": false},null,null,null]
скрыть столбцы динамически
предыдущие ответы используют устаревший синтаксис DataTables. В V 1.10+, вы можете использовать ().visible ():
var dt = $('#example').DataTable();
//hide the first column
dt.column(0).visible(false);
чтобы скрыть несколько столбцов, столбцы().visible () можно использовать в:
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 также
вы можете попробовать, как показано ниже, чтобы скрыть / показать динамически runtime
скрыть :
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
]
});
});
Я надеюсь, что это поможет вам