为啥包含导入和脚本后数据表选项不起作用
Posted
技术标签:
【中文标题】为啥包含导入和脚本后数据表选项不起作用【英文标题】：Why datatable options are not working after including imports and scripts为什么包含导入和脚本后数据表选项不起作用 【发布时间】：2020-08-09 19:53:38 【问题描述】：我想将数据表和 jquery 包含到我的 html 中。我正在关注https://datatables.net/examples/basic_init/zero_configuration.html 上的示例。预期结果：
我没有任何选择可以工作。我的进口顺序正确吗？我相信图书馆版本是最新的。刚开始做网页开发，请见谅。
我有应有的进口：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Core Reporting</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/datatables.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<link href=" url_for('static', filename='css/bootstrap.min.css') " rel="stylesheet">
<link href=" url_for('static', filename='css/mdb.min.css') " rel="stylesheet">
<link href=" url_for('static', filename='css/style.css') " rel="stylesheet">
</head>
然后在正文中我有表格的占位符 div：
<div class="container-fluid" id="main-container" style="margin-top: 120px; max-width: 1800px; background-color: white;">
% block maincard %% endblock %
</div>
在关闭正文之前导入脚本：
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/datatables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script type="text/javascript" src=" url_for('static', filename='js/popper.min.js') "></script>
<script type="text/javascript" src=" url_for('static', filename='js/bootstrap.min.js') "></script>
<script type="text/javascript" src=" url_for('static', filename='js/mdb.min.js') "></script>
<script>
$(document).ready(function()
$('#hypervisorTable').DataTable(
scrollY: 300,
paging: true
);
);
</script>
在 home 上方扩展的示例 tables.html 模板：
% extends 'home.html' %
% block maincard %
<table id="hypervisorTable" class="display" >
<thead>
% for col in data.columns %
<th class="th-sm"> col </th>
% endfor %
</thead>
<tbody>
% for row in data.index %
<tr>
<td> data.loc[row, 'Instance type'] </td>
<td> data.loc[row, 'Hypervisor'] </td>
<td> data.loc[row, 'vCPUs'] </td>
<td> data.loc[row, 'Cores'] </td>
<td> data.loc[row, 'Threads per core'] </td>
<td> data.loc[row, 'Memory (MiB)'] </td>
<td> data.loc[row, 'Storage (GB)'] </td>
</tr>
% endfor %
</tbody>
</table>
% endblock %
【问题讨论】：
我错过了 $('#hypervisorTable").dataTable() 调用。 更正后的帖子，在代码里，复制的时候被截断了，抱歉，反正不管用了 调用 .dataTable() 时表在吗？尝试在控制台中调用 $('#hypervisorTable").dataTable() 看看是否有效果。 对，所以控制台抛出了很多 datatables.js:3830 jQuery.Deferred 异常：无法设置属性和 DevTools 无法解析 SourceMap：但我害怕进一步询问，以防万一将被否决为零 【参考方案1】：表头只有几列来自数据对象。 DataTable 需要格式正确、完全匹配的列、行才能正确显示。
遍历所有列和所有值修复了问题：
<table id="hypervisorTable" class="display" >
<thead>
% for col in data.columns %
<th class="th-sm"> col </th>
% endfor %
</thead>
<tbody>
% for row in data.index %
<tr>
% for col in data.columns %
<td> data.loc[row, col] </td>
% endfor %
</tr>
% endfor %
</tbody>
</table>
【讨论】：
以上是关于为啥包含导入和脚本后数据表选项不起作用的主要内容，如果未能解决你的问题，请参考以下文章
为啥即使包含所有脚本引用，我的 jQuery-UI 对话框也不起作用？