Fatal编程技术网
  • javascript/
  • Javascript Jquery数据表的功能不起作用

Javascript Jquery数据表的功能不起作用

javascript html jquery css spring-mvc

Javascript Jquery数据表的功能不起作用,javascript,html,jquery,css,spring-mvc,Javascript,Html,Jquery,Css,Spring Mvc,我正在尝试将dataTable与CDN结合使用，但是视图看起来很好。我的表看起来像dataTable，但它的功能不起作用，如搜索排序等 这是我的JSP文件代码。 <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib uri="http://j

我正在尝试将dataTable与CDN结合使用，但是视图看起来很好。我的表看起来像dataTable，但它的功能不起作用，如搜索排序等

这是我的JSP文件代码。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Student List</title>

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

</head>
<body>

    <div class="col-sm-12">
        <h1>The List of Students IS :</h1>
    </div>
    <div class="row">
        <div class="col-sm-2">
            <input type="button" value="Add New Student"
                onclick="addStudentForm()">
        </div>

        <div id="addStudentForm"></div>

        <div class="col-sm-10">
            <table id="dataTable" class="">
                <thead>
                    <tr>
                        <th>Student Name</th>
                        <th>Student Course</th>
                        <th>Student Father</th>
                        <th>Student Address</th>
                        <th>Student Email</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <c:forEach var="tempStudent" items="${theStudent}">
                    <tbody>
                        <tr>
                            <td>${tempStudent.name }</td>
                            <td>${tempStudent.course }</td>
                            <td>${tempStudent.fatherName }</td>
                            <td>${tempStudent.address }</td>
                            <td>${tempStudent.email }</td>
                            <td><a>Update</a>| <a>Delete</a></td>
                        </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</body>
<script>
$(document).ready(function(){
    $('#dataTable').dataTable();
});
 </script>


</html>


学生名单
学生名单如下：
学名
学生课程
学生父亲
学生地址
学生电子邮件
行动
${tempstuent.name}
${tempstuent.course}
${tempstuent.fatherName}
${tempstuent.address}
${tempstuent.email}
更新|删除
$（文档）.ready（函数（）{
$（'#dataTable'）。dataTable（）；
});
这是我使用的代码，我已经检查过控制台上没有问题，但我不明白为什么它对我不起作用。请帮助，提前感谢。

您必须定义特定于功能的参数。例如：

$('#dataTable').DataTable({
                        pageLength: 10,
                        filter: true
                        deferRender:    true,
                        scrollY:        200,
                        scrollCollapse: true,
                        scroller:       true
                    });
我已经试过了，但它不工作，当试图从搜索栏中搜索任何东西时，它显示没有找到匹配的记录，即使它在那里，相同的代码在VScode中工作得很好，但在EclipseOh中不工作！真奇怪