I have a dataTable and i want to visible and invisible a specific column of this table when i unchecked the checkbox. for example unchecked the " Name " checkbox and table " Name " column will get hide but what i want is it should only work when i click save button. can anyone help me to achieve that
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
//var for the datatable object
var table = $('#example').DataTable({
"scrollY": "300px"
});
function filterGlobal() {
$('#example').DataTable().search(
$('#global_filter').val(),
$('#global_regex').prop('checked'),
$('#global_smart').prop('checked')
).draw();
}
function filterColumn(i) {
$('#example').DataTable().column(i).search(
$('#col' + i + '_filter').val(),
$('#col' + i + '_regex').prop('checked'),
$('#col' + i + '_smart').prop('checked')
).draw();
}
$(document).ready(function () {
//store the datatable object
globDataTable = $('#example').DataTable();
$('input.global_filter').on('keyup click', function () {
filterGlobal();
});
$('input.column_filter').on('keyup click', function () {
filterColumn($(this).parents('tr').attr('data-column'));
});
});
// hide specific columns of a table
var globDataTable;
$(".nametoggleCheck").click(function (){
var col = globDataTable.column(0);
col.visible(!col.visible());
})
$(".positiontoggleCheck").click(function () {
var col = globDataTable.column(1);
col.visible(!col.visible());
})
$(".officetoggleCheck").click(function () {
var col = globDataTable.column(2);
col.visible(!col.visible());
})
$(".agetoggleCheck").click(function () {
var col = globDataTable.column(3);
col.visible(!col.visible());
})
$(".starttoggleCheck").click(function () {
var col = globDataTable.column(4);
col.visible(!col.visible());
})
$(".salarytoggleCheck").click(function () {
var col = globDataTable.column(5);
col.visible(!col.visible());
})
//var for the datatable object
// hide specific columns of a table end
</script><ul>
<li>
<input class="nametoggleCheck" type="checkbox" name="foo" checked> Name</li>
<li>
<input type="checkbox" class="positiontoggleCheck" checked> Pisition</li>
<li>
<input type="checkbox" class="officetoggleCheck" checked> Office</li>
<li>
<input type="checkbox" class="agetoggleCheck" checked> Age</li>
<li>
<input type="checkbox" class="starttoggleCheck" checked> Start date</li>
<li>
<input type="checkbox" class="salarytoggleCheck" checked> Salary</li>
<li>
<input type="submit" value="Save" id="my_button">
</li>
</ul>
<table id="example" class="display dataTableShow" border="1" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>答案 0 :(得分：0)
As I understand your question, You want the table column show - hide effect only when 'Save' button is clicked. Then instead of doing show -hide on checkbox click, do it only when the 'save' button is clicked like this-
<script>
//var for the datatable object
var table = $('#example').DataTable({
"scrollY": "300px"
});
function filterGlobal() {
$('#example').DataTable().search(
$('#global_filter').val(),
$('#global_regex').prop('checked'),
$('#global_smart').prop('checked')
).draw();
}
function filterColumn(i) {
$('#example').DataTable().column(i).search(
$('#col' + i + '_filter').val(),
$('#col' + i + '_regex').prop('checked'),
$('#col' + i + '_smart').prop('checked')
).draw();
}
$(document).ready(function () {
//store the datatable object
var globDataTable = $('#example').DataTable();
$("#my_button").click(function() {
console.log("Save clicked");
var i = 0;
$('input[type=checkbox]').each(function () {
// sList += "(" + $(this).val() + "-" + (this.checked ? "checked" : "not checked") + ")";
console.log(this.checked);
var col = globDataTable.column(i);
if(! this.checked) {
col.visible(false);
}
else {
col.visible(true);
}
i++;
});
});
});
</script>