We help IT Professionals succeed at work.

Datatable not working

Hey i want to use datatables for the first time but it is not working:
THis code is in my header:
        <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css/">

        <script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

Open in new window

And this is the table:
    <table id = "myTable">
        <thead>
            <th>Username</th>
            <th>Result</th>
            <th>Quiz name</th>
            <th>Category</th>
            <th>Date</th>
        </thead>
        <tbody>
            {% for res in result_sql %}
            <tr>
                <td>{{res.username}}</td>
                <td>{{res.result}}</td>
                <td>{{res.quiz_name}}</td>
                <td>{{res.category}}</td>
                <td>{{res.date}}</td>
            </tr>
            {% endfor %}

        </tbody>


    </table>
<script>
$(document).ready( function () {
    $('#myTable').DataTable();
} );
</script>

Open in new window


Can anyone find the problem?
Comment
Watch Question

Analyst Assistant
CERTIFIED EXPERT
Commented:

You don't appear to have the correct links for datatables and you are missing one for jquery, try these.


    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

Author

Commented:
Thanks so much u fixed it!

Explore More ContentExplore courses, solutions, and other research materials related to this topic.