datatables 不显示带table的分页

Question

我想将表格分页与搜索功能结合使用。然后我从数据表中听到并尝试像这样包含它：

<!DOCTYPE html>
{% extends "base" %}


{% block head %}
{% load staticfiles %}
<script type="text/javascript" language="javascript" src="{% static "report/js/DataTables-1.10.5/media/js/jquery.js" %}"></script>
<script type="text/javascript" language="javascript" src="{% static "report/js/DataTables-1.10.5/examples/resources/syntax/shCore.js" %}"></script>
<script type="text/javascript" language="javascript" src="{% static "report/js/DataTables-1.10.5/examples/resources/demo.js" %}"></script>
{% endblock %}

{% block body %}

<table class="table table-hover" id="ctable">
 <th>Datum</th>
 <th>Aufgabe</th>
 <th>Dauer</th>
 <th>Abteilung</th>
 <th>Jahr</th>
 <th>Lernziel</th>
 <th></th>
 <th></th>

 {% for ct in completedtask.all %}
   {% csrf_token %}
  <tr>
   <td>{{ ct.date }}</td>
   <td>{{ ct.task }}</td>
   <td>{{ ct.duration|default:"&nbsp;" }}</td>
   <td>{{ ct.education_department|default:"&nbsp;" }}</td>
   <td>{{ ct.year_of_training }}</td>
   {% if ct.learning_objective.all %}
   <td>
    {% for lObj in ct.learning_objective.all %}
     {{ lObj }},
    {% endfor %}
   </td>
   {% else %}
   <td>&nbsp;</td>
   {% endif %}
   <td><a href="{% url 'completed_task_update' pk=ct.pk %}" class="glyphicon glyphicon-edit"></a></td>
   <td><a href="{% url 'completed_task_delete' pk=ct.pk %}" class="glyphicon glyphicon-remove"></a></td>
  </tr>
 {% endfor %}
</table>

<script type="text/javascript">
$(document).ready(function() {
  $('#ctable').dataTable( {
    "pagingType": "full_numbers"
  } );
} );
</script>

{% endblock %}

显然这不起作用，我收到以下错误：

TypeError: $(...).dataTable is not a function

最终渲染 HTML:

<!DOCTYPE html>
<html>
 <head>

    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
    <script type="text/javascript" language="javascript" src="/static/report/js/DataTables-1.10.5/media/js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="/static/report/js/DataTables-1.10.5/examples/resources/syntax/shCore.js"></script>
    <script type="text/javascript" language="javascript" src="/static/report/js/DataTables-1.10.5/examples/resources/demo.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="/static/report/js/report.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/report/css/bootstrap-3.3.4-dist/css/bootstrap.min.css"/>
<script type="text/javascript" src="/static/report/css/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
 </head>

 <body>

    <ol class="breadcrumb">
    <li><a href="/">Startseite</a>
    <li><a href="/todo/">To do Liste</a></li>
    <li><a href="/completed_task/">Ausgef&#252;hrte T&#228;tigkeiten</a></li>
    <li><a href="/report">Berichtsheft</a></li>
    <li><a href="/topic/">Themen</a></li>
    <li><a href="/learning_objective/">Lernziele</a></li>
    <li><a href="/logout" method="post">Logout</a><input type='hidden' name='csrfmiddlewaretoken' value='9CfMZiQdvvVsVlccKRmSd7I2wl9M8xBr' /></li>
    <li><a href="http://www.comp-pro.de/" style="text-decoration:none;">
    <img src="/static/report/img/photo.png"></img>
    </a></li>
    </ol>

    <h4>Guten Tag, Ibrahim!</h4>



<center>
<button onclick="toggle_element( 'show' );" class="glyphicon glyphicon-plus"></button>
<button onclick="toggle_element( 'hide' );" class="glyphicon glyphicon-minus"></button>
</center>

<form class="form-horizontal" style="display:none;" method="POST" action="."> <input type='hidden' name='csrfmiddlewaretoken' value='9CfMZiQdvvVsVlccKRmSd7I2wl9M8xBr' />
<p>Es wird empfohlen die Rechtschreibpr&#252;fung im Browser zu aktivieren f&#252;r das schreiben des Berichts.</p>
<p>Anleitungen f&#252;r
<a href="https://support.mozilla.org/de/kb/Rechtschreibpruefung-nutzen">Firefox</a> und  
<a href="https://support.google.com/chrome/answer/95604?hl=de">Google Chrome</a></p>
 <fieldset>


    <div class="control-group">
     <label class="control-label">Ausgeführte Tätigkeit</label>
     <div class="controls"><textarea cols="40" id="id_task" name="task" rows="10">
</textarea>
     </div>
    </div>



    <div class="control-group">
     <label class="control-label">Dauer</label>
     <div class="controls"><input id="id_duration" name="duration" type="number" />
     </div>
    </div>



    <div class="control-group">
     <label class="control-label">Datum</label>
     <div class="controls"><input id="id_date" name="date" type="text" />
     </div>
    </div>



    <div class="control-group">
     <label class="control-label">Ausbildungsjahr</label>
     <div class="controls"><input id="id_year_of_training" name="year_of_training" type="number" />
     </div>
    </div>



    <div class="control-group">
     <label class="control-label">Abteilung</label>
     <div class="controls"><input id="id_education_department" maxlength="32" name="education_department" type="text" />
     </div>
    </div>



    <div class="control-group">
     <label class="control-label">Lernziel</label>
     <div class="controls"><select multiple="multiple" id="id_learning_objective" name="learning_objective">
<option value="19">Bar</option>
</select>
     </div>
    </div>


 </fieldset>
 <div class="form-actions" style="margin-top: 4px;">
  <button type="submit" class="btn btn-success">Senden</button>
 </div>
</form>

<br>

<form class="form-horizontal" style="display:none;"action="/preview" method="post"> <input type='hidden' name='csrfmiddlewaretoken' value='9CfMZiQdvvVsVlccKRmSd7I2wl9M8xBr' />
 <label class="control-lable">Datum</label>
 <div class="controls">
    <input type="text" name="date" style="width:10%;" id="date"></br>
 </div>
    <input type="submit" target="_blank" value="Vorschau" class="btn btn-default"/>
</form>

<table class="table table-hover" id="ctable">
 <thead>
 <tr>
 <th>Datum</th>
 <th>Aufgabe</th>
 <th>Dauer</th>
 <th>Abteilung</th>
 <th>Jahr</th>
 <th>Lernziel</th>
 <th></th>
 <th></th>
 </tr>
 </thead>

 <tbody>

     <input type='hidden' name='csrfmiddlewaretoken' value='9CfMZiQdvvVsVlccKRmSd7I2wl9M8xBr' />
  <tr>
   <td>10.02.2015</td>
   <td>Foo</td>
   <td>2</td>
   <td>Baz</td>
   <td>2</td>

     <td>

     Bar,

   </td>

     <td><a href="/completed_task/update/37/" class="glyphicon glyphicon-edit"></a></td>
   <td><a href="/completed_task/delete/37/" class="glyphicon glyphicon-remove"></a></td>
  </tr>

 </tbody>
</table>

<script type="text/javascript">
$(document).ready(function() {
    $('#ctable').dataTable( {
        "pagingType": "full_numbers"
    } );
} );
</script>




    </body>

</html>

你知道如何解决这个问题吗？

Answer 1

您没有在 {% block head %} 部分正确加载 DataTables 库。要在您的页面上包含数据表，请在该块中或结束 </head> 标记之前包含以下 HTML 代码：

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>

您的 table 也需要定义如下，请参阅 documentation 了解更多信息。

<table class="table table-hover" id="ctable">
   <thead>
      <tr>
         <th>Datum</th>
         <th>Aufgabe</th>
         <th>Dauer</th>
         <th>Abteilung</th>
         <th>Jahr</th>
         <th>Lernziel</th>
         <th></th>
         <th></th>
      </tr>
   </thead>
   <tbody>

   <!-- table contents goes here -->

   </tbody>
</table>

datatables 不显示带table的分页

Datatables does not display pagination with table

javascript

jquery

datatables

django-templates

jquery-datatables