我有下面的代码,我想隐藏一些基于城市数据的列。
我使用了回调函数,但它会中断表。
如果我改变了一些东西,它也会出错。
var hide_col = $('#table_id').dataTable().api();
var table = $('#table_id');
var oTable = table.dataTable({
"destroy": true,
"processing": true,
"serverSide": true,
"ajax": "/app/get-data/"+val1+'/'+val2+'/'+val3+'/',
"searching": false,
"ordering": true,
"paging": true,
"columnDefs": [
{"targets": 1, "orderable": false},{"targets": 2, "orderable": false},
{"targets": 3, "orderable": false},{"targets": 4, "orderable": false},
{"targets": 5, "orderable": false},{"targets": 6, "orderable": false},
{"targets": 7, "orderable": false},{"targets": 8, "orderable": false},
{"targets": 9, "orderable": false},{"targets": 10, "orderable": false},
{"targets": 11, "orderable": false},{"targets": 12, "orderable": false},
{"targets": 13, "orderable": false},{"targets": 14, "orderable": false},
{"targets": 15, "orderable": false},{"targets": 16, "orderable": false},
{"targets": 17, "orderable": false},{"targets": 18, "orderable": false},
{"targets": 19, "orderable": false},{"targets": 20, "orderable": false},
{"targets": 21, "orderable": false},{"targets": 22, "orderable": false},
{"targets": 23, "orderable": false},{"targets": 24, "orderable": false},
{"width": "200%", className: "dt-left", "targets": 0}
],
buttons: [{ extend: 'print',
className: 'btn dark btn-outline' },
{ extend: 'copy',
className: 'btn red btn-outline' },
{ extend:'pdf',
orientation:'landscape',
className: 'btn green btn-outline',
exportOptions: {
columns: [0,1,2,3,4,5,6,7,8,9,10,11,12] }},
{ extend: 'excel',
className: 'btn yellow btn-outline' },
{ extend: 'csv',
className: 'btn purple btn-outline' },
{ extend: 'colvis',
className: 'btn dark btn-outline',
text: 'Columns' }
],
// setup responsive extension: http://datatables.net/extensions/responsive/
responsive: false,
"order": [
[0, 'asc']
],
"lengthMenu": [
[10, 20, 50, 100],
[10, 20, 50, 100] // change per page values here] // change per page values here
],
// set the initial value
"pageLength": 10,
"initComplete": function(settings, json) {
if (settings.jqXHR.responseJSON.city == 'A'){
hide_col.columns([6,7,8,12,16,17,18,19,20]).visible(false);
hide_col.columns([9,10,11,13,14,15,21,22,23,24]).visible(true);
}
else if (settings.jqXHR.responseJSON.city == 'B'){
hide_col.columns([9,10,11,13,14,15,21,22,23,24]).visible(false);
hide_col.columns([6,7,8,12,16,17,18,19,20]).visible(true);
}
}
});
我也在使用一个回调,但似乎我做错了什么。请帮忙。谢谢您。
最佳答案
我可以看到,您试图在实际初始化之前访问Datatables API
。实际上,我相信您完全可以去掉hide_col
变量,并使用oTable
变量调用columns().visible()。
所以删除这一行:
var hide_col = $('#table_id').dataTable().api();
并将此函数更改为使用
oTable
而不是hide_col
:"initComplete": function(settings, json) {
if (settings.jqXHR.responseJSON.city == 'A'){
oTable.columns([6,7,8,12,16,17,18,19,20]).visible(false);
oTable.columns([9,10,11,13,14,15,21,22,23,24]).visible(true);
}
else if (settings.jqXHR.responseJSON.city == 'B'){
oTable.columns([9,10,11,13,14,15,21,22,23,24]).visible(false);
oTable.columns([6,7,8,12,16,17,18,19,20]).visible(true);
}
}
关于jquery - 根据响应数据的某些条件隐藏jQuery Datatable中的特定列,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50411500/