Table is not showing any functionality when it renders...jQuery not loading?
Table is not showing any functionality when it renders...jQuery not loading?
EdSwartz
Posts: 3Questions: 1Answers: 0
My table that pulls from a Google Sheet using Google Apps Script (mostly javascript) is not rendering any of the sorting or style functionality present in Datatables.
Here is what is in the head:
<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/v/dt/dt-1.12.1/af-2.4.0/b-2.2.3/cr-1.5.6/r-2.3.0/rr-1.2.8/sc-2.0.7/sl-1.4.0/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.12.1/af-2.4.0/b-2.2.3/cr-1.5.6/r-2.3.0/rr-1.2.8/sc-2.0.7/sl-1.4.0/datatables.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#tableItems').DataTable();
} );
</script>
<base target="_top">
</head>
Here is the javascript function that gets called to render the table. The table renders with "thead" items in bold and "tr" items in rows below the headings so it is creating a table.
function works(tableValues) {
document.getElementById('tableOfOptions').innerHTML = "<table id='tableItems' class='row-border' style='width:100%'><thead><tr><th>"+ 'Word' +"</th><th>"+ 'Number of Groups' +"</th><th>"+ 'Average Group Size' +"</th><th>"+ 'Largest Group' +"</th><th>"+ '2nd Largest Group' +"</th><th>"+ '% of Solving with next word' +"</th></tr></thead><tbody id='tBod'>" ;
for(var i=1;i<tableValues.length;i++)
{
var html_to_insert = "<tr><td>"+tableValues[i][0]+"</td><td>"+tableValues[i][1]+"</td><td>"+tableValues[i][2]+"</td><td>"+tableValues[i][3]+"</td><td>"+tableValues[i][4]+"</td> <td>"+tableValues[i][5]+"</td> </tr>";
document.getElementById('tBod').insertAdjacentHTML('beforeEnd', html_to_insert);
}
var lastBodyTag = "</tbody></table>"
document.getElementById('tBod').insertAdjacentHTML('afterEnd', lastBodyTag)
}
}
What is strange is when I run the debugger it says: DataTables debugger: jQuery not loaded on this page, therefore no DataTables :-(
However if I go into the console and type: $ === jQuery it returns true.
Also, if I inspect the table and open the Chrome Console and then copy the inspected table (i.e. copy \ Copy element) and paste it into jsfiddle with the above head it works (I can adjust the table sorting etc)
This question has an accepted answers - jump to answer
Answers
I also ran the debugger tool on the web page and it said:
"Information about 0 tables available."
DataTables UpToDate
15 tests complete. No failures or warnings found!
Here is the configuration data as well: ugipuw
Sounds like you are creating the
tableand populating it after you initialize Datatables. Thus the"Information about 0 tables available."status. You need to build the table first, populate it the initialize Datatables.Kevin
Yep! That was the issue! I'm just getting back into a javascript after a 2 year hiatus (woodworking has been my recent rabbit hole!) and knew it had to be something simple.
Thank you! Onto the next error message to solve!
Can we swap, I'll do woodworking now that you are back at the Javascript?
I'd love to spend more time doing some turning. I've got some lovely apple and oak drying at the moment
Allan