[英]datatable checkbox toggle column
I have a huge datatable with too many columns. 我有一个庞大的数据表,其中包含太多列。 I have filtered some of them like this
我已经过滤了其中一些
$(document).ready(function() {
var table = $('#example').DataTable( {
"bJQueryUI": false,
"bAutoWidth": false,
"bDestroy": true,
// "bPaginate": false,
// "bInfo": false,
"lengthMenu": [ [30, 40, 50, -1], [30, 40, 50, "All"] ],
"columnDefs": [
{ "visible": false, "targets": [4] }, //OSversion
{ "visible": false, "targets": [8] }, //VmVersions
{ "visible": false, "targets": [7] }, //VMStates
{ "visible": false, "targets": [6] } //VMtoolsVersion
],
} );
$('input.toggle-vis').on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
} );
} );
I want to add checkboxes to say which columns can be added or removed. 我想添加复选框以说明可以添加或删除的列。 I tried this Perl code
我尝试了这个Perl代码
$log .= '<div> Toggle column: <table id="check1"><tr>';
my $j = 0;
foreach $toogle (@logvmware) {
$log
.= '<td><input type="checkbox" class="toggle-vis" data-column="'
. $j
. '"><FONT COLOR="#FF3333">'
. $toogle
. '</FONT></td>';
if ( $j eq 6 ) {
$log .= "<tr>";
}
$j++;
}
$log .= '</table> </div>';
My checkboxes correctly add or remove the columns but they're always empty! 我的复选框正确添加或删除了列,但它们始终为空! I want them to be checked if the column is visible and unchecked if the column is hidden.
我希望检查列是否可见,如果隐藏则取消检查。
I hope I was clear; 我希望我很清楚。 I am not fluent in English.
我的英语不太流利。
I ve finally understood 我终于明白了
e.preventDefault();
stuck my checkboxes, i copied pasted some code that used that, but in my case it was unwanted. 卡住我的复选框,我复制粘贴了一些使用它的代码,但就我而言,这是不需要的。 and i forgot checked="checked" in my html
我忘了我的HTML中checked =“ checked”
so finally i use the html : 所以最后我使用html:
$log .= '<div> Toggle column: <table id="check1"><tr>';
my $j=0;
foreach $toogle (@logvmware)
{
$log .= '<td><input type="checkbox" name="checkbox'.$j.'" id="checkbox'.$j.'" class="toggle-vis" data-column="'.$j.'" checked="checked" /><FONT COLOR="#FF3333">'.$toogle.'</FONT></td>';
if ($j eq 6) {$log .= "<tr>";}
$j++;
}
$log .= '</table> </div>';
and the javascript : 和javascript:
$(document).ready(function() {
var table = $('#example').DataTable( {
//stateSave: true
"bJQueryUI": false,
"bAutoWidth": false,
"bDestroy": true,
// "bPaginate": false,
// "bInfo": false,
"lengthMenu": [ [30, 40, 50, -1], [30, 40, 50, "All"] ],
"columnDefs": [
{ "visible": false, "targets": [4] }, //OSversion
{ "visible": false, "targets": [8] }, //VmVersions
{ "visible": false, "targets": [7] }, //VMStates
{ "visible": false, "targets": [6] } //VMtoolsVersion
],
/********************calcul des totaux*************/
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
//update checkbox state for inform hidden column
document.getElementById("checkbox4").checked = false;//hidden default column
document.getElementById("checkbox8").checked = false;
document.getElementById("checkbox7").checked = false;
document.getElementById("checkbox6").checked = false;
// Total over all pages
totalcpu = api
.column( 11 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
Totalcpu = api
.column( 11, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
totalmemorysize = api
.column( 12 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
Totalmemorysize = api
.column( 12, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
totalmemoryused = api
.column( 13 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
Totalmemoryused = api
.column( 13, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 11 ).footer() ).html(
'Number CPU <br>'+Totalcpu +' <br>('+ totalcpu +' total)'
);
$( api.column( 12 ).footer() ).html(
'Memory Size <br>'+Totalmemorysize +' <br>('+ totalmemorysize +' total)'
);
$( api.column( 13 ).footer() ).html(
'Memory Used <br>'+Totalmemoryused +' <br>('+ totalmemoryused +' total)'
);
}
/******************fin des totaux *******************/
}
);
$('input.toggle-vis').on( 'click', function (e) {
// e.preventDefault(); //empêche la mise à jour des checkbox
// Get the column API object
var column = table.column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
} );
} );
And it work fine, i can see which column are hidden by default, and i can add or delete column through my checkbox ... 它工作正常,我可以看到默认情况下隐藏了哪些列,并且可以通过复选框添加或删除列...
Sorry for the identation, but i think this code can be usefull. 抱歉,无法识别,但是我认为这段代码可能有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.