Есть ли способ с плагином dqtables jquery скрыть (и показать) столбец таблицы?
Я понял, как перезагрузить данные таблицы: используя fnClearTable и fnAddData.
Но моя проблема в том, что в одном из моих представлений для таблицы (например, в скрытом режиме) я не хочу показывать определенные столбцы.
Скрывать столбцы можно с помощью этой команды:
fnSetColumnVis( 1, false );
Где первый параметр - индекс столбца, а второй параметр - видимость.
Через: http://www.datatables.net/api - функция fnSetColumnVis
если кто-то снова сюда попадет, это сработало для меня...
"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }]
В предыдущих ответах используется устаревший синтаксис 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] }
]
});
Вы можете определить это во время инициализации datatable
"aoColumns": [{"bVisible": false},null,null,null]
Для тех, кто использует обработку на стороне сервера и передает значения базы данных в 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 также
Вы можете попробовать как показано ниже, чтобы скрыть/показать динамическое время выполнения
Скрыть: fnSetColumnVis (1, false, false);
Пример: oTable.fnSetColumnVis(item, false, false);
Показать:
fnSetColumnVis (1, true, false);
Пример: oTable.fnSetColumnVis(item, false, false);
Здесь oTable - объект Datatable.
Если вы используете данные из 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
}
]
});});
С помощью api вы можете использовать
var table = $('#example').DataTable();
table.column( 0 ).visible( false );
Посмотрите эту информацию:
Примечание: принятое решение теперь устарело и часть устаревшего кода. http://legacy.datatables.net/ref Решения могут быть неприемлемыми для тех, кто работает с новыми версиями DataTables (теперь это наследие) Для более нового решения: вы можете использовать: https://datatables.net/reference/api/columns().visible()
альтернативы вы могли бы реализовать кнопку: 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
},
]
});
});
var example = $('#exampleTable').DataTable({
"columnDefs": [
{
"targets": [0],
"visible": false,
"searchable": false
}
]
});
Атрибут Target определяет положение столбца. Атрибут Visible, отвечающий за видимость столбца. Атрибут Searchable, отвечающий за средство поиска. Если установлено значение 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 возвратил что-то вроде этого
поэтому я хочу скрыть индекс индекса [0] и RegistrationStatusId [5]
$(document).ready(function() {
$('#example').dataTable( {
"columnDefs": [
{ "aTargets": [0, 5], "sClass": "invisible"},// here is the tricky part
]
});
});
Надеюсь, это поможет вам.