Example of a Django Template instantiating a Data Table

datatable-django-template-example.html

{% extends "base.html" %}
{% load i18n %}

{% block media %}
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/bs/dt-1.10.10,r-2.0.0/datatables.min.css"/>
{% endblock %}

{% block js %}
    <!-- DataTable -->
    <script type="text/javascript" src="https://cdn.datatables.net/s/bs/dt-1.10.10,r-2.0.0/datatables.min.js"></script>

    <script>
        var myData = [];
        {% for item in items %}
                myData.push([
                    '{{ item.date|date:"Y-m-d H:m" }}',
                    '{{ item.value }}'
                ]);
        {% endfor %}
        var myTable = $('#my-table').DataTable({
            order: [[0, "asc"]],
            pageLength: 25,
            responsive: true,
            columns: [
                {sTitle: "{% trans 'Date' %}", sWidth: "100px"},
                {sTitle: "{% trans 'value' %}", sWidth: "50px"}
            ],
            data: myData
        });
    </script>

{% endblock %}

{% block content %}

    <h1>{% trans 'My Table' %}</h1>

    <div class="row">
      <table id="my-table" class="table table-striped table-bordered" cellspacing="1" width="90%">
        <thead>
        </thead>

        <tbody>
        </tbody>
      </table>
    </div>

{% endblock %}