I am trying to use the https://clusterize.js.org/ javascript package with my Django website for displaying extremely large tables neatly and speedily. I downloaded the package's necessary js and css files, and referenced them in the html getting loaded when i visit my site's url: mysite.com/popularify
{% load static %}
{% block content %}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- uncommenting this line loading status files causes errors
<script src="{% static 'js/clusterize.min.js' %}"></script>
-->
<!-- I have a static/js/ folder -->
</head>
<body>
<div>
arthur russell = spotify:artist:3iJJD5v7oIFUevW4N5w5cj <br>
<!--HTML-->
<div class="clusterize">
<table>
<thead>
<tr>
<th>Headers</th>
</tr>
</thead>
</table>
<div id="scrollArea" class="clusterize-scroll">
<table>
<tbody id="contentArea" class="clusterize-content">
<tr class="clusterize-no-data">
<td>Loading data…</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
// clusterize JavaScript
var data = ['<tr>x</tr>', '<tr>z</tr>', '<tr>zxc</tr>'];
var clusterize = new Clusterize({
rows: data,
scrollId: 'scrollArea',
contentId: 'contentArea'
});
</script>
</body>
</html>
{% endblock content %}
And ensured that I have the two files in that location, when I try to access my site i am getting a 404 error only when I uncomment the line in my html file referencing the django static file.
My settings.py Django file has :
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
How can I make my html page load these static files ?
Looks like chrome version may not be compatible or it has something to do with the chrome extensions.
What you can do is to block background.js using this code:
To get the URL, hover on the background.js written on the inspection menu.
Hope this helps!