I want to copy only 1 Column data depending on filter search. This code copies all table data including header and I only want data on 1 column.
Added the Code provided below, and it worked, but the copy function didn't work when I clicked the button it's just spinning. Adding my html code here. I think I am missing some libraries.
<script>
/*
*THIS FUNCTION CALL THE getData() FUNCTION IN THE Code.gs FILE,
*AND PASS RETURNED DATA TO showData() FUNCTION
*/
google.script.run.withSuccessHandler(showData).getData();
//THIS FUNCTION GENERATE THE DATA TABLE FROM THE DATA ARRAY
function showData(dataArray)
{
$(document).ready(function()
{
$('#data-table').DataTable(
{
data: dataArray,
//CHANGE THE TABLE HEADINGS BELOW TO MATCH WITH YOUR SELECTED DATA RANGE
columns: [
{"title":"Application"},
{"title":"Queue"},
{"title":"Site"},
{"title":"Location"},
{"title":"Distro"}
],
// dom: 'Blfrtip',
dom:
"<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'f><'col-sm-12 col-md-4'B>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
buttons: [
{
extend: 'copy',
text: 'Get Distro',
header: false, // Disable export header tabla
exportOptions: {
columns: [0,5] // Select columns to be exported
},
title: null // Disable title on exported data
}
]
});
});
}
</script>
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!--INCLUDE REQUIRED EXTERNAL JAVASCRIPT AND CSS LIBRARIES-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script type="text/javascript" src="DataTables/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
<!--Styling Starts here-->
<style>
body {
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
margin: 1;
}
.header {
font-family: Arial, Helvetica, sans-serif;
padding: 30px;
text-align: center;
background: #004879;
color: white;
font-size: 26px;
font-weight: bold;
}
/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.navbar {
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
font-weight: bold
}
/* Style the navigation bar links */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Active/current link */
.navbar a.active {
background-color: #666;
color: white;
}
.container {
font-family: Arial, Helvetica, sans-serif;
background-color: #ffffff;
width: 80%;
}
</style>
</head>
<body>
<div class="header">
<h1> <img src = "https://drive.google.com/uc?export=viewn" width ="70" /> IMC Application Directory</h1> </div>
<div class="navbar"> <a href="https://.com/" target="_blank">AION </a>
<a href="https://.com/navpage.do" target="_blank">SERVICE NOW</a>
<!-- <a href="https://AKfycbyVCVfzzccLsvX_DLNs4Rp69e39xsj6zSvqoruqGHIY/dev" target="_blank">APPLICATION DICTIONARY</a> -->
<a href="https://amazon.com" target="_blank">QUICKSIGHT</a>
</div>
<br>
<div class="container">
<div class="col">
<table id="data-table" class="table table-striped table-sm table-hover table-bordered">
<!-- TABLE DATA IS ADDED BY THE showData() JAVASCRIPT FUNCTION ABOVE -->
</table>
<br>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.colVis.min.js"></script>
<!-- <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.colVis.min.js"></script> -->
<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
<?!= include('JavaScript'); ?>
<!--INCLUDE JavaScript.html FILE-->
</body>
</html>
Here is a full example of datatables copy button with export options column selector:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
<script type="text/javascript" src="DataTables/datatables.min.js"></script>
</head>
<body>
<table id="table_id">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
</tr>
<tr>
<td>dd</td>
<td>ee</td>
<td>ff</td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
$( document ).ready(function() {
$('#table_id').DataTable(
{
dom: 'Bfrtip',
buttons: [
{
extend: 'copy',
text: 'Copy some column without headers',
header: false, // Disable export header tabla
exportOptions: {
columns: [0,1] // Select columns to be exported
},
title: null // Disable title on exported data
}
]
}
);
});
</script>
And the output is:
aa bb
dd ee