[英]PHP DataTables hide multiple columns
我试图通过单击DataTables来隐藏多列(8-25):
function fnShowHide()
{
/* Get the DataTables object again - this is not a recreation, just a get of the object */
var oTable = $('#closing').dataTable();
for(var i = 9; i <= 25; i++) {
var bVis = oTable.fnSettings().aoColumns[i].bVisible;
oTable.fnSetColumnVis( i, bVis ? false : true );
}
}
基于标准的DataTables show / hide列,但是不太确定为什么它不起作用。 它仅隐藏第一列。
我不确定是否与您使用数据表的方式相同,我认为您希望单击而不是加载,但这是我使用的有效代码:
注意:
{ "bSortable": false, "bSearchable": false, "bVisible": false, "aTargets": [ 9 ] },
定位到第9列,否对该列进行排序,不可见。
下面的示例代码:
var table_data = $('#open_datatable').dataTable( {
"aoColumns": [
{ "sTitle": "", "sClass": "datatable-tiny datatable-center", "bSortable": false }
,{ "sTitle": "ID", "sClass": "datatable-small" }
,{ "sTitle": "Date", "sClass": "datatable-small" }
,{ "sTitle": "Part Number" , "sClass": "datatable-large"}
,{ "sTitle": "Customer", "sClass": "datatable-medium" }
,{ "sTitle": "Manufacturer", "sClass": "datatable-large" }
,{ "sTitle": "Quantity", "sClass": "datatable-medium datatable-center" }
,{ "sTitle": "Price", "sClass": "datatable-medium datatable-center" }
,{ "sTitle": "Description", "sClass": "" }
,{ "sTitle": "Urgent", "sClass": "" }
,{ "sTitle": "Search", "sClass": "" }
,{ "sTitle": "", "sClass": "datatable-tiny datatable-center", "bSortable": false }
]
,"bJQueryUI": true
,"sPaginationType": "full_numbers"
,"bProcessing": true
,"bServerSide": true
,"sAjaxSource": "<?php echo $URL;?>"
,"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}
,"bScrollCollapse": true
,"fnDrawCallback": function () {
$('.hidden-img').each(function(){
$(this).click();
});
}
,"aoColumnDefs": [
{"fnRender": function (o) {
return "<img src='<?= "img/img.png"; ?>' border='0' width='1px' height='1px' class='hidden-img'> ";
},"bSortable": false, "aTargets": [0]},
{"fnRender": function (o) {
return o.aData[10];
},"bSortable": false, "aTargets": [3]},
{"fnRender": function (o) {
return "$<input type='text' value='"+CurrencyFormatted(o.aData[7], true)+"' class='input-target_price'>";
},"aTargets": [7]},
{"bSortable": false, "aTargets": [1]},
{"bSortable": false, "aTargets": [2]},
{"bSortable": false, "aTargets": [5]},
{"fnRender": function (o) {
return "<input type='text' value='"+o.aData[6]+"' class='input-qty'>";
}, "bSortable": false, "aTargets": [6]},
{"bSortable": false, "aTargets": [7]},
{ "bSortable": false, "bSearchable": false, "bVisible": false, "aTargets": [ 4 ] },
{ "bSortable": false, "bSearchable": false, "bVisible": false, "aTargets": [ 8 ] },
{ "bSortable": false, "bSearchable": false, "bVisible": false, "aTargets": [ 9 ] },
{ "bSortable": false, "bSearchable": false, "bVisible": false, "aTargets": [ 10 ] },
{"fnRender": function (o) {
return "<img src='<?= "img/img.png"; ?>' border='0' class='save' rel='"+o.aData[11]+"' >";
},"aTargets": [11]}
] // end aoColumnDefs
});//end Datatable
希望这会有所帮助,我在过去调整Datatables时遇到了很多麻烦,但是当您掌握它时,它们很棒!
祝好运。
您可以在列上直接使用.withClass('none'),它将隐藏该列
vm.dtOpt_SalesEntry = DTOptionsBuilder.newOptions()
.withOption('responsive', true)
vm.dtOpt_SalesEntry.withPaginationType('full_numbers');
vm.dtOpt_SalesEntry.withColumnFilter({
aoColumns: [{
type: 'null'
}, {
type: 'text',
bRegex: true,
bSmart: true
}, {
type: 'text',
bRegex: true,
bsmart: true
}, {
type: 'select',
bRegex: false,
bSmart: true,
values: vm.dtSalesEntryUnitTypes
}, {
type: 'text',
bRegex: true,
bSmart: true
}]
});
vm.dtColDefs_SalesEntry = [
DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3),
DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5).withClass('none'),
DTColumnDefBuilder.newColumnDef(6).withClass('none'), DTColumnDefBuilder.newColumnDef(7).withClass('none'),
DTColumnDefBuilder.newColumnDef(8).withClass('none'), DTColumnDefBuilder.newColumnDef(9).withClass('none'),
DTColumnDefBuilder.newColumnDef(10).withClass('none'), DTColumnDefBuilder.newColumnDef(11).withClass('none')
];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.