Question

我在应用程序中使用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的地方添加了评论，不知道出了什么问题，我的观点得到了证实，但是没有datatable

可能是什么问题？

Answer 1

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

<div class="head">
            <ul>
                <li>HOME</li>
                <li onClick="NewApplication();">NEW APPLICATION</li>
                <li onClick="PendingApplication();">PENDING APPLICATION</li>
                <li onClick="Customer();">APPROVED</li>
                <li>LOAN STRUCTURE</li>
                <li class="right"><img id="profilepic" src="images/emp2.jpg"></li>
                <li class="right">ABC</li>
            </ul>
            <div class="dropdown-content">
                <label onClick="Setting();">SETTINGS</label>
            </div>
        </div>

它将解决问题

索引页未显示DataTable

1 个答案: