Jquery 索引页不显示数据表
我在应用程序中使用Jquery 索引页不显示数据表,jquery,html,datatable,thymeleaf,Jquery,Html,Datatable,Thymeleaf,我在应用程序中使用DateTable时遇到问题 我在前端使用Thymeleaf,在后端使用spring boot,我试图在索引页面中添加一个DataTable,但什么都没有发生,我只从浏览器控制台得到: 这是我在index.html页面上的代码 <!DOCTYPE html> <html xmlns:th="https://www.thymeleaf.org"> <head> <meta charset="utf-8"> <meta htt
DateTable
时遇到问题
我在前端使用Thymeleaf
,在后端使用spring boot
,我试图在索引
页面中添加一个DataTable
,但什么都没有发生,我只从浏览器控制台得到:
这是我在index.html
页面上的代码
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Psybergate</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<!-- bootstrap -->
<link rel="stylesheet" href="../static/style/bootstrap.css" />
<!-- Font Awesome -->
<link rel="stylesheet" href="../static/style/font-awesome.css" />
<!-- Ionicons -->
<link rel="stylesheet" href="../static/style/ionicons.css" />
<!-- Theme style -->
<link rel="stylesheet" href="../static/style/AdminLTE.css" />
<!-- Skin -->
<link rel="stylesheet" href="../static/style/skin-yellow.css" />
<!-- Custom style -->
<link rel="stylesheet" href="../static/style/custom.css" />
</head>
<!-- jQuery 3 -->
<script src="../static/js/jquery.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../static/js/bootstrap.js"></script>
<!-- AdminLTE App -->
<script src="../static/js/adminlte.js"></script>
<body class="hold-transition skin-yellow sidebar-mini sidebar-collapse" />
<div class="wrapper">
<div th:include="/fragments/nav"></div>
<div th:include="/fragments/header"></div>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Home <small>Current Assets</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Assets</li>
</ol>
</section>
<!-- Main content -->
<section class="content container-fluid">
<form action="#" method="get" th:action="@{/assets/view}">
<table id="example1"
class="display table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Asset Number</th>
<th>Assigned To</th>
<th>Status</th>
<th>Serial Number</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr th:each="asset: ${assets}">
<td th:text="${asset.assetNumber}"></td>
<td th:text="${asset.assignedTo}"></td>
<td th:text="${asset.status}"></td>
<td th:text="${asset.serialNumber}"></td>
<td th:text="${asset.type}"></td>
<td id="editData">
<button class="btn-twitter fa fa-pencil edit"
th:value="${asset.assetNumber}" name="assetNumber"></button>
</td>
</tr>
</tbody>
</table>
</form>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<div th:include="/fragments/footer"></div>
</div>
<!-- ./wrapper -->
<!-- REQUIRED JS SCRIPTS -->
<!-- DATATABLE -->
<script type="text/javascript" charset="utf8"
src="../static/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8"
src="../static/js/dataTables.bootstrap.js"></script>
<script>
$(function() {
$('#example1').DataTable()
})
</script>
<!-- /DATATABLE -->
</body>
</html>
麦角酸盐
国内流动资产
资产
资产编号
分配给
地位
序列号
类型
$(函数(){
$('#示例1')。数据表()
})
我在引用jquerydatatable
的地方添加了注释,我不知道问题出在哪里,我确实获得了视图,但没有datatable
有什么问题吗?将下面的文件放在节的正下方
<!-- jQuery 3 -->
<script src="../static/js/jquery-3.3.1.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../static/js/bootstrap.js"></script>
<!-- AdminLTE App -->
<script src="../static/js/adminlte.js"></script>
它将解决问题请在jquery-3.3.1.jsI完成后包含数据表jquery,现在我有以下错误
jquery-3.3.1.js:3818 jquery。延迟异常:无法读取未定义类型的属性“mData”错误:无法读取未定义类型的属性“mData”
此修复程序似乎对我的页面有影响,但仍然没有DataTable在类型之后再添加一个