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在类型之后再添加一个