I'm struggling with implementing dataTables into my django app. StackOverflow tells me that jquery must be loaded first before the datatable.min.js. Did that already and it still doesn't work. HELP!!!

[Solved!](https://www.reddit.com/r/javascript/comments/69wcum/im_struggling_with_implementing_datatables_into/)

Here's the format of one of my html file


{% extends 'base.html' %}

{% block main_content %}
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
DataTables Advanced Tables
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>d
</tbody>
</table>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
{% endblock %}

{% block javascript %}
<!-- Datatable JS -->
<script type="{% static 'js/jquery.dataTables.min.js' %}"></script>
<script type="{% static 'js/dataTables.bootstrap.min.js' %}"></script>
<script type="{% static 'js/dataTables.responsive.js' %}"></script>

<script>
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
});
</script>
{% endblock %}




Here's the javascript segment of my Base.html


<!-- jQuery -->
<script src="{% static 'jquery/jquery.min.js' %}"></script>

<!-- Bootstrap Core JavaScript -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="{% static 'js/metisMenu.min.js' %}"></script>

<!-- Custom Theme JavaScript -->
<script src="{% static 'js/sb-admin-2.js' %}"></script>

{% block javascript %}
{% endblock %}


I'm just trying on replicating the datatable I found from a bootstrap theme into a django format. I'm desperate!

Here's the error that I get.

Uncaught TypeError: $(...).DataTable is not a function

Edit: Removed what was a redundant code

/r/django
https://redd.it/69wbj7