Individual column searching (text inputs) not working
Individual column searching (text inputs) not working
Jack L
Posts: 5Questions: 2Answers: 0
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.
Answers
I don't see anything obvious in your code. See if this example helps. If not please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Hi Kevin,
I already tried the example you pointed out, but also didn't work.
This is the link test case:
https://script.google.com/macros/s/AKfycbyZGR3vHvm1YsZxklhSbGJ4ILuyhrCG427XKOb9tpjgRLqCFtFG-SRkAiGTn_fHrvIq7w/exec
Anyway you can help ?
Your test case doesn't run. There is an error in the browser's console. Also if you view the source it seems to be in a format that is not useful for troubleshooting. We need a running test case showing the issue where we can debug the code. See this link for some options:
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
You can use a sample of the table data to populate
data: dataArray,in the test case. See this example.When you say it doesn't work - what exactly happens?
Have you verified the event handlers created are fired when typing inside the inputs?
Kevin
I put your relevant code snippets for the column search into this test case:
https://live.datatables.net/lazepibe/1/edit
It does work. Maybe it will help you to debug. Or maybe you can update it to show the issue.
Kevin
Also I'm not familiar with what this is doing and why the include is in the
tbody:Kevin
Hi Kevin,
I put the test case in the live event: https://live.datatables.net/cirecogi/1/
The table data does not load (source from google sheet), only shows the tfoot column titles, even the column search box not working
The browser's console is showing a syntax error in your test case.
Ok, then get a sample of the data to load as I suggested. Without a running test cas showing the issue it will be impossible to debug. I provided an example with your code that shows it works.
Please answer my questions from above:
Kevin
I'm not sure if I follow.
What event handlers are you reffering to ? Maybe you can give some exampke.
Kevin is referring to the
keyupevent handler that you are adding to theinputelements. He is suggesting putting a break point or a simpleconsole.logstatement in there to make sure they are being called as expected.Allan