jquery脚本执行顺序DataTables

Posted

技术标签:

【中文标题】jquery脚本执行顺序DataTables【英文标题】:Jquery script execution order 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>

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

以上是关于jquery脚本执行顺序DataTables的主要内容,如果未能解决你的问题,请参考以下文章

使用 jQuery DataTables 恢复原始排序顺序

Jquery DataTables在排序时将顺序更改为desc

jQuery dataTables:点击广告应该对所有列进行降序然后升序排序

保持启用的复选框在 jQuery DataTables 的顶部,尽管排序顺序

deb包安装/卸载/升级时,preinst, postinst, prerm, postrm的执行顺序

deb包安装/卸载/升级时,preinst, postinst, prerm, postrm的执行顺序