jquery脚本执行顺序DataTables答案

【问题标题】：Jquery script execution order DataTablesjquery脚本执行顺序DataTables
【发布时间】：2019-04-16 12:13:11
【问题描述】：

我正在通过调用从控制器加载的 html 填充页面

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

'simple_dataframe' 是 pandas.to_html() 方法，它为数据表 jquery 返回正确的 html。

下一个脚本是：

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

加载不正确。我已将返回的 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>

【问题讨论】：

标签： jquery django datatables

【解决方案1】：

问题是因为load() 调用是异步的，因此您尝试在尚不存在的HTML 上创建数据表。要解决此问题，请将DataTable() 调用放在load() 的回调中，如下所示：

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

【讨论】：