DataTables DOM rendering yielding "no data available" (Django)
DataTables DOM rendering yielding "no data available" (Django)
dromando
Posts: 3Questions: 2Answers: 0
I've used DataTables with very basic stuff once before and it has worked nicely.
It's my first time using it with Django and pug/jade templates, and I'm having a lot of headache early on.
What's happening is that the data is being displayed, but DataTables prepends the row with a message that there's no data, and table interactivity is completely disabled. Screenshot.
Below are relevant snippets from the files:
in base.html's footer block, I've added the following:
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.15/af-2.2.0/b-1.3.1/cr-1.3.3/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.js"></script>
And this is the same file's header block:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% compress css %}
<link type="text/x-scss" href="{% static "stylesheets/bootstrap.scss" %}" rel="stylesheet" media="screen" >
{% endcompress %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.15/af-2.2.0/b-1.3.1/cr-1.3.3/fh-3.1.2/r-2.1.1/sc-1.4.2/datatables.min.css"/>
<!-- TODO: change this -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="{% static "javascripts/bootstrap.js" %}"></script>
<title>{% block title %}Inventracker{% endblock %}</title>
</head>
Here's the pug file rendering the table and loading the script afterwards:
table#Botable.table.table-bordered
thead
//- TODO: dynamically load fields (needs to be done in views)
tr.warning
- var cols = ['#', 'Brand', 'Name', 'Vintage', 'Capacity', 'Quantity', 'Action'];
each col in cols
th #{col}
tbody
//- -var is declared and reused for count
- var index = 1
each val in bottles
tr
th(scope="row")= index
td= val.brand__name
td= val.name
td= val.vintage
td= val.capacity
td= val.brand__count
td
div.text-center
button.btn.btn-default.btn-xs(type="button", data-toggle="modal", data-target="#" + val['slug'])
span.glyphicon.glyphicon-plus.text-primary
button.btn.btn-default.btn-xs(type="button", data-toggle="modal", data-target=".remove-bottles")
span.glyphicon.glyphicon-minus.text-primary
//- Add Quantity Modal
div.modal.fade(tabindex="-1" role="dialog")(id="{{val.slug}}")
div.modal-dialog.modal-sm(role="document")
div.modal-content
div.modal-header
H3 How Many Bottles of this Kind?
div.modal-body
form.form-horizontal(method="post" action=".")
| {% csrf_token %}
input.form-control(type="number" name="num_of_bottles")
input.form-control(type="hidden", name="brand_details", value="{{ val }}")
div.modal-footer
btn.btn.btn-default(type="button" data-dismiss="modal") Close
input.btn.btn-primary(type="submit" value="submit")(name="add_quant") Add
index = index+1
script(type="text/javascript").
$(document).ready(function () {
$('#Botable').DataTable({
searching: false,
"order": [],
"columnDefs": [
{"orderSequence": ["desc", "asc"], "targets": [1, 2, 3]},
{"orderable": false, "targets": 0}
],
ordering: true,
paging: false,
"info": false
});
});
Note that while this file is included in another file, which does extend base.html. I can also confirm by looking at the source that the files are being included in the page.
Answers
Sounds like you are getting a Javascript error. Have you looked at the browser's console for errors?
Kevin
Would also be interesting to see what the generated HTML looks like please. View source in your browser would do.
Allan