Django/DataTables - Template Loop breaks DataTable

Question

When placing a template loop in my table-row my DataTable breaks.

<table id="store_table" class="table-striped table-hover">
  <thead class="thead-light">
    <tr>
      <th>Store #</th>
      <th>Name</th>
      <th>Phone</th>
      <th>City</th>
      <th>State</th>
    </tr>
  </thead>

    <tbody>
    {% for store in stores %}
        <tr id="table-row">
            <td><a href="/stores/{{ store.pk }}">{{ store.store_number }}</a></td>
            <td><a href="/stores/{{ store.pk }}">{{ store.name }}</a></td>
            <td>{{ store.phone }}</td>
            <td>{{ store.city }}</td>
            <td>{{ store.state }}</td>
            {% for circuit in store.circuit_set.all %}
                <td>{{ circuit.circuit_id }}</td>
            {% endfor %}
           <td>{{ store.postal }}</td>

        </tr>
    {% endfor %}
    </tbody>
    </table>

Console Output:

jQuery.Deferred exception: i is undefined Ha@http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:24:397
O@http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:16:421
na/<@http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:17:21
map/<@https://code.jquery.com/jquery-3.3.1.min.js:2:1324
map@https://code.jquery.com/jquery-3.3.1.min.js:2:3169
map@https://code.jquery.com/jquery-3.3.1.min.js:2:1292
na@http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:16:497
e@http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:92:431
n/<@http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:93:118
each@https://code.jquery.com/jquery-3.3.1.min.js:2:2571
each@https://code.jquery.com/jquery-3.3.1.min.js:2:1238
n@http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:83:194
h.fn.DataTable@http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:165:488
@http://10.200.20.63:8080/stores/:12810:19
l@https://code.jquery.com/jquery-3.3.1.min.js:2:29373
a/</c<@https://code.jquery.com/jquery-3.3.1.min.js:2:29677
 undefined

So I'm assuming this is because {% %} isn't a recognized/handleable table element.

shafikshaon · Accepted Answer · 2019-01-24 03:48:15Z

1

You table break for this

{% for circuit in store.circuit_set.all %}
    <td>{{ circuit.circuit_id }}</td>
{% endfor %}

If you change this to

<td>
{% for circuit in store.circuit_set.all %}
    <p>{{ circuit.circuit_id }}</p>
{% endfor %}
</td>

This may works.

answered Jan 24, 2019 at 3:48

shafikshaon

6,5025 gold badges36 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CodeSpent Over a year ago

Hmm, so this is a good workaround. I'll wait around for a better solution that allows me to create columns dynamically, but I can use this if that solution doesn't come, thanks.

CodeSpent Over a year ago

Actually considering this is a hidden field solely for searching data, this will work. For future reference, still open to anything more elegant for visible data. :)

Collectives™ on Stack Overflow

Django/DataTables - Template Loop breaks DataTable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related