I'm trying to insert individual column searching, but it does not work properly.
I am running it using Apps Script.
These are the codes I used:
code.gs
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
function getData(){
var spreadSheetId = "sheetID";
var dataRange = "Sheet1!A2:I";
var range = Sheets.Spreadsheets.Values.get(spreadSheetId, dataRange);
var values = range.values;
return values;
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
</head>
<body>
<div class="container">
<br>
<div class="row">
<div class="col-20">
<p class="h4 mb-4 text-center p-3">Search Database</p>
<table id="data-table" class="table table-striped table-sm table-hover table-bordered">
<tbody>
<?!= include('JavaScript'); ?>
</tbody>
<tfoot>
<tr>
<th>File Name</th>
<th>Description</th>
<th>File Type</th>
<th>Category</th>
<th>Topic</th>
<th>File Extension</th>
<th>File Link</th>
<th>Uploaded By</th>
<th>Uploaded Date</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</body>
</html>
JavaScript.html
<script>
google.script.run.withSuccessHandler(showData).getData();
function showData(dataArray) {
$(document).ready(function () {
$('#data-table tfoot th').each( function() {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />');
});
$('#data-table').DataTable({
data: dataArray,
columns: [
{ "title": "File Name" },
{ "title": "Description" },
{ "title": "File Type" },
{ "title": "Category" },
{ "title": "Topic"},
{ "title": "File Extension" },
{ "title": "File Link",
"render": function(data, type, row, meta){
if(type === 'display'){
data = '<a href="' + data + '">' + 'Link Here' + '</a>';
}
return data;
}
},
{ "title": "Uploaded By" },
{ "title": "Upload Date" },
]
initComplete: function() {
this.api().columns().every( function() {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function() {
if (that.search() !==this.value) {
that
.search(this.value)
.draw();
}
})
});
});
});
}
</script>
stylesheet.html
<style>
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
</style>
I have already tried many code variations, but all failed to display the individual column search properly. The above codes are my last attempt. Any idea what seems to be the issue here? I’m looking forward for any reply and thanx in advance.