未捕获的TypeError：$（...）。Datatable不是函数。但是在我调用datatable之前已经加载了Jquery

Question

这是我的一个html文件

的格式

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

这是我的Base.html的javascript片段

<!-- 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 %}

我正在尝试将从bootstrap主题中找到的数据表复制到django格式中。我现在拼命想把这个问题弄清楚了一天。请帮助！