select option show hide column table : เลือกคอลัมน์ที่ต้องการซ่อนตาราง
ทำปุ่มสำหรับเลือก โดยมี option value ตามชื่อหัวตาราง > ใส่ onchange ใน tag select > สร้างตาราง
customer.php
<![CDATA[<?php include_once("checklogin.php"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lekjew.com</title>
<?php include_once("include/style.php"); ?>
<style>
@charset "utf-8";
/* layout.css Style */
.image-preview-input {
position: relative;
overflow: hidden;
margin: 0px;
color: #000;
background-color: #ffffff;
border-color: #ccc;
}
.image-preview-input:hover{
position: relative;
overflow: hidden;
margin: 0px;
color: #000;
background-color: #e9e9e9;
border-color: #ccc;
}
.image-preview-input input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.image-preview-input-title {
margin-left:2px;
}
input[type=text]:disabled, select[disabled]{background-color:#f9f9f9 !important; border:1px solid #ddd;height:34px !important;}
.cursor{ cursor:pointer;}
.dropdown .btn-light {
background-color: #fff !important;
border: 0px solid #ced4da;
padding: 5px;
}
</style>
</head>
<body class="adminbody">
<?php include_once("include/header_login.php"); ?>
<div id="main" >
<?php include_once("leftmenu.php"); ?>
<div class="content-page">
<div class="content">
<div class="col-md-12">
<div class="card pd-10">
<div class="col-md-12"><div class="row">
<h3>Customer</h3>
</div></div>
<div class="col-md-12"><div class="row">
<div class="col-md-4 col-xs-4" id="browsefile">
<form name="frmImportfile" id="frmImportfile" method="post" runat="server" enctype="multipart/form-data">
<div class="input-group image-preview">
<input name="filename" id="filename" type="text" class="form-control" placeholder="Select File Excel" disabled="disabled" >
<span class="input-group-prepend input-group-sm">
<div class="btn btn-primary image-preview-input" style="height:34px;" onClick="ClearFileImport();" > <i class="fa fa-times"></i> </div>
<div class="btn btn-default image-preview-input" style="height:34px;"> Select
<input type="file" name="fileUpload" id="fileUpload" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onchange="fname();">
</div>
<button type="button" class="btn btn-primary btn-sm" style="height:34px" id="uploadfile">Import</button>
</span>
</div>
</form>
</div>
<div class="col-md-3 col-xs-3">
<div class="input-group" title="กลุ่ม">
<div class="input-group-prepend"><span class="input-group-text front1" style="border-radius:5px 0px 0px 5px;border-right:0px;">ซ่อนคอลัมน์</span></div>
<select name="SEL_COLUMN" id="SEL_COLUMN1" class="form-select selectpicker" data-live-search="true" onchange="HideColumn();" multiple style="border-radius:0px 5px 5px 0px;border-left:0px;">
<option value="0" selected>Number</option>
<option value="1" selected>Customer</option>
<option value="2" selected>Dealer Code</option>
<option value="3" selected>Dealer Name</option>
<option value="4" selected>Branch</option>
<option value="5" selected>Delivery Time</option>
<option value="6" selected>Address</option>
<option value="7" selected>Province</option>
<option value="8" selected>Hub</option>
<option value="9" selected>Latitude</option>
<option value="10" selected>Longitude</option>
<option value="11" selected>Route</option>
<option value="12" selected>Route Group</option>
</select>
</div>
</div>
</div>
</div></div>
<div class="col-md-12"><div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="progress hide">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
<div id="showdata hide"></div>
<div id="showerror hide"></div>
</div>
</div></div>
<table id="tableA" class="table table-bordered tablec" cellspacing="0" cellpadding="0" border="1" >
<thead>
<tr>
<th>#</th>
<th>Customer</th>
<th>Dealer Code</th>
<th>Dealer Name</th>
<th>Branch</th>
<th>Del. Time</th>
<th>Address</th>
<th>Province</th>
<th>Hub</th>
<th>Latitude</th>
<th>Longitude</th>
<th>Route</th>
<th>Route Group</th>
</tr>
<tr>
<th>#</th>
<th>Customer</th>
<th>Dealer Code</th>
<th>Dealer Name</th>
<th>Branch</th>
<th>Del. Time</th>
<th>Address</th>
<th>Province</th>
<th>Hub</th>
<th>Latitude</th>
<th>Longitude</th>
<th>Route</th>
<th>Route Group</th>
</tr>
</thead>
<tbody id="showtableA">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot class='hide'>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="alert alert-success" id="success-alert" style="position:absolute; z-index:2025; bottom:40%; left:45%; width:350px; display:none; ">
<button type="button" class="btn btn-outline-default close" data-dismiss="alert">x</button>
<div class="text-center m-top-20"><h4 id="resultalert"></h4></div>
<br>
</div>
<div class="alert alert-danger" id="fail-alert" style="position:absolute; z-index:2025; bottom:40%; left:45%; width:350px; display:none; ">
<button type="button" class="btn btn-outline-default close" data-dismiss="alert">x</button>
<div class="text-center m-top-20"><h4 id="resultfailalert"></h4></div>
<br>
</div>
</body>
</html>
<?php include_once("include/js.php"); ?>
<script src="js/jquery.dataTables.js"></script>
<script src="js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
RefreshTable();
CallData();
function fname(){
var fname = ($('#fileUpload').val()).replace(/^.*\\/, "");
$('#filename').attr("placeholder", fname);
}
function ClearFileImport(){
$('#frmImportfile')[0].reset();
$('#filename').attr("placeholder","Select File Excel");
}
function showSuccessAlert(data){
$('#resultalert').html(data);
$("#success-alert").fadeTo(2000, 300).slideUp(300, function(){
$("#success-alert").slideUp(300);
});
}
$('#uploadfile').click(function(event){
var form = $('#frmImportfile')[0];
var form_data = new FormData(form);
form_data.append("CREATE_BY", "<?php echo $username;?>");
form_data.append("USERNAME", "LEKJEW241008");
form_data.append("PASSWORD", "LEKJEW@241008");
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "ImportCustomer.php",
data: form_data,
dataType: 'json',
processData: false,
contentType: false,
cache: false,
beforeSend: function() {
$('.progress').removeClass('hide');
$('#showdata').html("กำลังนำข้อมูลเข้า กรุณารอสักครู่");
},
success: function (data){
$('.progress').addClass('hide');
$('#showdata').html("");
var j=0;
var err = "";
if(data.length > 0) {
$.each(data, function(index, value) {
if(value.ERR!="" ){
err = err + "<div class='col-md-12'>"+ value.ERR + "</div>";
}
j++;
});
}
if(j>0){
$('#showerror').html(err);
}else{
showSuccessAlert("สำเร็จ");
CallData();
}
},
error:function(jqXHR, exception){
$('.progress').addClass('hide');
$('#showdata').html("");
var error_msg = '';
if (jqXHR.status === 0) {
error_msg = 'Not connect.\n Verify Network.';
} else if (jqXHR.status == 404) {
error_msg = 'Not Found File ImportCustomer';
} else if (jqXHR.status == 500) {
error_msg = 'Internal Server Error [500].';
} else if (exception === 'parsererror') {
error_msg = 'Requested JSON parse failed.';
} else if (exception === 'timeout') {
error_msg = 'Time out error.';
} else if (exception === 'abort') {
error_msg = 'Ajax request aborted.';
} else {
error_msg = 'Uncaught Error.\n' + jqXHR.responseText;
}
$('#showerror').html(error_msg);
}
});
});
function CallData(){
$.ajax({
url: "customer_data.php",
async: false,
cache: false,
contentType: false,
processData: false,
type: 'post',
success: function(data) {
var tr = "";
var JsonData = JSON.parse(data);
var resL = JsonData.length;
for (var i = 0; i < resL; i++) {
tr=tr+"<tr>" ;
tr=tr+"<td>";
tr=tr + JsonData[i]["CUST_ID"];
tr=tr+"</td>";
tr=tr+"<td>";
tr=tr + JsonData[i]["CUST_GROUP"];
tr=tr+"</td>";
tr=tr+"<td>";
tr = tr + JsonData[i]["CUST_CODE"];
tr=tr+"</td>";
tr=tr+"<td>";
tr = tr + JsonData[i]["CUST_NAME"];
tr=tr+"</td>";
tr=tr+"<td>";
tr = tr + JsonData[i]["CUST_BRANCH"];
tr=tr+"</td>";
tr=tr+"<td>";
tr = tr + JsonData[i]["CUST_TIME"];
tr=tr+"</td>";
tr=tr+"<td>";
tr = tr + JsonData[i]["CUST_ADDRESS"];
tr=tr+"</td>";
tr=tr+"<td>";
tr = tr + JsonData[i]["CUST_PROVINCE"];
tr=tr+"</td>";
tr=tr+"<td>";
tr = tr + JsonData[i]["CUST_REGION"];
tr=tr+"</td>";
tr=tr+"<td>";
tr = tr + JsonData[i]["CUST_LAT"];
tr=tr+"</td>";
tr=tr+"<td>";
tr = tr + JsonData[i]["CUST_LONG"];
tr=tr+"</td>";
tr=tr+"<td>";
tr = tr + JsonData[i]["CUST_ROUTE"];
tr=tr+"</td>";
tr=tr+"<td>";
tr = tr + JsonData[i]["CUST_GROUPROUTE"];
tr=tr+"</td>";
tr=tr+"</tr>" ;
}
$('#showtableA').html('');
$('#tableA').DataTable().destroy();
$('#showtableA').html(tr);
RefreshTable();
},
error:function(data){
}
});
}
function RefreshTable(){
$('#tableA thead tr:eq(0) th').empty();
$('#tableA thead tr:eq(0) th').each( function (i) {
if(i>0){
var title = $(this).text();
$(this).html( '<input type="text" class="form-control search'+i+' section-no-print">' );
$( 'input', this ).on( 'keyup change', function () {
if ( table.column(i).search() !== this.value ) {
table
.column(i)
.search( this.value )
.draw();
}
});
}
});
var table = $('#tableA').DataTable( {
dom: "<'row'<'col-md-1'<'pull-left'>><'col-md-3'<'pull-left'>><'col-md-8'><'col-sm-12'tr>>",
searching: true,
ordering: false,
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
iDisplayLength: -1,
scrollY: "450px",
scrollCollapse: true,
scrollX: true,
responsive: true,
"pagingType": "full_numbers",
"fnInitComplete": function (oSettings) { $('.select_broker_wrapper').find('.tblBroker_head').hide(); }
});
$('.dataTables_scrollBody #tableA thead tr:eq(1)').empty();
$('.dataTables_scrollBody #tableA tfoot tr:eq(0)').empty();
}
function HideColumn() {
var table = $('#tableA').DataTable();
const dropdown = document.getElementById("SEL_COLUMN1");
const allOptions = Array.from(dropdown.options).map(opt => parseInt(opt.value));
const selectedOptions = Array.from(dropdown.selectedOptions).map(opt => parseInt(opt.value));
allOptions.forEach(idx => {
var isVisible = selectedOptions.includes(idx);
table.column(idx).visible(isVisible);
});
table.columns.adjust().draw();
}
</script>]]>