索引页面未显示 DataTable答案

【问题标题】：Index page not showing DataTable索引页面未显示 DataTable
【发布时间】：2018-08-13 09:13:04
【问题描述】：

我在应用程序中使用 DateTable 时遇到问题，

我在前端使用Thymeleaf，在后端使用spring-boot，我正在尝试将DataTable 添加到我的index 页面但没有任何反应，我只能从我的浏览器控制台：

这是我在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>

我在引用 JQuery datatable 的地方添加了 cmets，我不知道是什么问题，我确实得到了我的看法，但没有 datatable

可能是什么问题？

【问题讨论】：

请在jquery-3.3.1.js之后包含数据表jquery

标签： jquery html datatable thymeleaf

【解决方案1】：

将下面的文件放在该部分的正下方

<!-- 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.js:3818 jQuery.Deferred exception: Cannot read property 'mData' of undefined TypeError: Cannot read property 'mData' of undefined 此修复似乎对我的页面有影响，但仍然没有数据表
在Type之后再添加一个