Jquery script execution order DataTables

Question

I am populating page with html loaded from controler by calling

$("#test").load("{% url 'simple_dataframe' %}");

'simple_dataframe' is pandas.to_html() method which is returning proper html for datatables jquery.

Next script is:

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

Which doesnt load properly. I have copied returned html to page and run it with only DataTable jquery and it runs fine. So its not related to malformed html. I think its something to do with the order in which scripts are called.

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static '/css/bootstrap.min.css' %}" type="text/css"/>
    <link rel="stylesheet" href="{% static '/css/jquery.dataTables.css' %}" type="text/css"/>
    <script src="{% static "js/jquery-3.3.1.min.js" %}"></script>
    <script src="{% static 'js/jquery.dataTables.js' %}"></script>
</head>
<body>
<div id="test"></div>
<script>
    $(document).ready(function () {
        $("#test").load("{% url 'simple_dataframe' %}");
    });</script>

<script>
    $(document).ready(function () {
        $('#df_table').DataTable();
    });
</script>
</body>
</html>

Rory McCrossan · Accepted Answer · 2018-11-13 15:58:19Z

1

The problem is because the load() call is asynchronous, so you're attempting to create a Datatable on HTML which doesn't yet exist. To fix this, put the DataTable() call in the callback of load(), like this:

$(function () {
  $("#test").load("{% url 'simple_dataframe' %}", function() {
    $('#df_table').DataTable();
  });
});

answered Nov 13, 2018 at 15:58

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Collectives™ on Stack Overflow

Jquery script execution order DataTables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related