intell
intell
Description of problem:
Layman here taking the first attempt at programing. Following code on apps script pulls raws from google sheet query fine the first time but does not refresh on later attempts. I disabled DataTables internal search and created a search linked to a query in google sheets that automatically updates every time the search input is entered or the button beside it is clicked. The DataTable populates correctly at first attempt but does not reload on later ones.
I tried to paste ajax.reload(); and: table.rows({selected:true}).remove(); table.rows.add( jsonData ).draw( false ); at all possible places in the code. Did not get the required refresh. (I even tried table.destroy(); and table.clear(). Now quite despirate and do not want to give up on this handy plug-in. Any help is appreciated. Kindly be specific what to include in the below code and exactly where. Thanks in advance.
Debugger code (debug.datatables.net):
<script>
document.getElementById("btn").addEventListener("click",appendGS);
var input = document.getElementById("searchRqst");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
document.getElementById("btn").click();
}
});
function appendGS(){
input = document.getElementById("searchRqst").value
google.script.run.withSuccessHandler(showData).getData();
document.getElementById("AppndTrigger").innerHTML = "Searched for: " + input;
document.getElementById("searchRqst").value = "";
/*
*CALL THE getData() FUNCTION IN THE Code.gs FILE,
*AND PASS RETURNED DATA TO showData() FUNCTION
*/
google.script.run.userClicked(input);
}
//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":"Meaning", "width": "40%", "class": "text-right"},
{"title":"Arabic", "width": "8%", "class": "text-right"},
{"title":"English", "width": "8%", "class": "text-left"},
{"title":"French", "width": "8%", "class": "text-left"},
{"title":"German", "width": "7%", "class": "text-left"},
{"title":"Greek", "width": "7%", "class": "text-left"},
{"title":"Latin", "width": "7%", "class": "text-left"},
{"title":"Reference", "width": "15%", "class": "text-right"}
]
});
});
}
</script>
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This question has an accepted answers - jump to answer
Answers
The code:
As you said, you'll need to delete all the rows (
rows().remove()), and re-add (rows.add()) with yourdatavalue.-ajax.reload()won't work - as the data wasn't initially loaded via Ajax.If that's not working, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Thank you Colin for your reply.
1. Where exactly in the above code should I put the raws remove function:
var table = $('#data-table').DataTable();
var rows = table.rows().remove().draw();
2. Should not code in lines #23 onwards suffice for raw add?
3. Since my code is on apps script linked to a Google Sheet. It did not work on the test case format. However, the below link shows you how it is working first time only (linked to sample data. To try it out, you can search for "belief", "beg", being":
https://www.falasefah.com/%D9%85%D8%B9%D8%AC%D9%852
4. Full HTML with the script at the end below (not including Code.gs):
It looks like to me like
showData()isn't being called - I found it hard debugging that app.It would be worth adding debug in
showData()just to verify if it is being called. You could also usedestroyin the DataTables initialisation to destroy the existing table and data.Colin
Thank you Colin and sorry to have troubled you with this. Have a great day.