Datatables не отображает разбиение на страницы таблицей

Я хочу использовать разбиение на страницы с функцией поиска. Потом я услышал от DataTables и попытался включить его так:Datatables не отображает разбиение на страницы таблицей

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

Final визуализации 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>

Do вы знаете, как решить эту проблему?

источник

2015-03-25 ZedsWhatSheSaid

Вы неправильно загрузили библиотеку DataTables в разделе {% block head %}. Чтобы включить DataTables на странице, включают в себя следующие HTML-код в этом блоке или перед закрывающим </head> тег:

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

Кроме того, ваша таблица должна быть определена, как показано ниже, см 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>

источник

2015-03-25 17:05:08

Я по-прежнему получаю ту же ошибку:/ – ZedsWhatSheSaid

Не могли бы вы разместить окончательный визуализированный HTML в дополнение к шаблону? –

Так будет отображаться поисковый вызов сразу или мне нужно определенное количество записей? Потому что я добавил и , но это ничего не изменило – ZedsWhatSheSaid

Datatables не отображает разбиение на страницы таблицей

ответ

Смежные вопросы