Jquery脚本执行顺序数据表_Jquery_Django_Datatables

Jquery脚本执行顺序数据表

jquery django datatables

Jquery脚本执行顺序数据表,jquery,django,datatables,Jquery,Django,Datatables,我通过调用从Controller加载的html填充页面 $("#test").load("{% url 'simple_dataframe' %}"); “simple_dataframe”是pandas.to_html（）方法，它为datatables jquery返回正确的html 下一个脚本是： <script> $(document).ready(function () { $('#df_table').DataTable(); }); &l

我通过调用从Controller加载的html填充页面

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

“simple_dataframe”是pandas.to_html（）方法，它为datatables jquery返回正确的html

下一个脚本是：

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


$（文档）.ready（函数（）{
$（'df#u table'）.DataTable（）；
});

无法正确加载。我已将返回的html复制到页面，并仅使用DataTable jquery运行它，它运行良好。因此它与格式错误的html无关。我认为这与脚本的调用顺序有关

{% 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>

{%load static%}
标题
$（文档）.ready（函数（）{
$（“#测试”）.load（“{%url”simple_数据帧“%”）；
});
$（文档）.ready（函数（）{
$（'df#u table'）.DataTable（）；
});

问题是因为

load（）

调用是异步的，所以您试图在HTML上创建一个尚不存在的Datatable。要解决此问题，请将

DataTable（）

调用放入

load（）

的回调中，如下所示：

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