python - 无法使用 jquery-datatables 自定义表以在显示端进行排序/过滤/排序
问题描述
我有一个 html 文件来使用烧瓶应用程序呈现我的表格。它工作正常,我想使用数据表添加一些自定义。
我真的不确定在 jQuery 部分的哪个位置添加自定义。我的代码在 html 文件中有它,但是当我运行它时我没有看到自定义工作。它应该是我的项目文件夹中的 static/js/jquery.js 文件吗?我下载了数据表,但我没有看到结果。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$(document).ready(function () {
$('#queues').dataTable();
});
</script>
<script
src="https://code.jquery.com/jquery-1.11.1.min.js"></script> //
JQuery Reference
<script
src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js">
</script>
<script
src="https://cdn.datatables.net/plug-
ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.js">
</script>
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-
ui.css">
<link rel="stylesheet"
href="https://cdn.datatables.net/plugins/9dcbecd42ad/integration/
jqueryui/dataTables.jqueryui.css">
<style type="text/css">
body {
background: seashell;
color: black;
}
div.container {
max-width: 500px;
margin: 100px auto;
border: 20px solid white;
padding: 10px;
text-align: center;
}
h4 {
text-transform: uppercase;
}
</style>
<title>{{ title }} - Queues</title>
</head>
<body>
<h2>Page for Queues display </h2>
<p style="color:blue;">Queues information</p>
<table border="1">
<th style="text-align:left;">Job</th>
<th style="text-align:left;">Team</th>
<th style="text-align:left;">Problem</th>
<th style="text-align:left;">CPU</th>
<th style="text-align:left;">Memory</th>
{% for row in data%}
<tr>
<td>{{ row[0] }}</td> <td>{{ row[1] }}</td> <td>{{ row[2] }}</td> <td>{{ row[3] }}</td> <td>{{ row[4] }}</td>
</tr>
{% endfor %}
</table>
我得到了正确显示数据但没有自定义的表格。我按照此示例中的说明进行操作:https ://www.codeproject.com/Tips/844403/%2FTips%2F844403%2FjQuery-Datatables-For-Beginners
解决方案
我过去发现,在使用数据表时,如果您的表中不包含<tbody>
and<thead>
标记,则该表将不会显示为数据表。这些显示在您发送的链接中,但不在您的代码中。
推荐阅读
- angular - 我可以在 angular [routerLink] 中调用一个函数来设置查询参数吗?
- json - 无法在 Microsoft 自适应卡中播放 youtube 视频
- javascript - 使用 map 组合两个 rxjs observables 的数据
- android - Android模拟器无法打开某些应用程序
- python - 如何使用 pytest 测试烧瓶应用程序?
- python - 使用 python 访问 Microsoft SharePoint excel 文件
- python - 自动调整 pyqt 小部件的大小而不将其放入布局中
- javascript - 从 mongodb 乘以 2 个值时出错
- python - 如何从 MongoDB 获取 python 中的唯一值?
- reactjs - Axios 发布失败并显示 403 错误代码并显示 CSRF 令牌验证失败但使用 Postman 在标头中传递 csrftoken 时工作正常 django api