jquery - jquery脚本执行顺序DataTables
问题描述
我正在通过调用从控制器加载的 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>
解决方案
问题是因为load()
调用是异步的,所以您试图在 HTML 上创建一个尚不存在的 Datatable。要解决此问题,请将DataTable()
调用放在 的回调中load()
,如下所示:
$(function () {
$("#test").load("{% url 'simple_dataframe' %}", function() {
$('#df_table').DataTable();
});
});
推荐阅读
- reactjs - 如何从子类中的componentdidmount将值返回到reactjs中的父类
- google-apps-script - Google Apps 脚本 - 电子表格 - 根据不是来自电子表格的值在单元格中创建 onEdit 下拉列表
- macos - 在 Mac Catalyst 中使用 Apple AuthorizationError 登录?(在 iPad 上效果很好)
- reactjs - 如果组件在另一个组件中定义,则在渲染之间丢失状态
- c++ - c ++通用单链表字符串打印失败
- mysql - 使用自定义顺序对表中的行进行排序,每行唯一的mysql
- javascript - jQuery 没有检测到生成的脚本元素
- python - 运行epicbox代码时权限被拒绝?
- pandas - 使用多个尝试例外和数据帧编译代码
- mysql - 使用用户的个人首选自定义属性扩展表