Question

我正在尝试通过ajax调用显示数据表。

有sales.jsp，它有2个输入开始日期和结束日期。还有另一个report.jsp读取其请求的参数并计算数据并将其显示在数据表（jQuery-plugin）中

使用过的文件和文件夹的文件夹结构如下，JS库位于js文件夹中：

js
admin
|--report.jsp
|--sales
   |--sales.jsp

sales.jsp上的AJAX如下：

function getReport() {
    var xmlhttp = new XMLHttpRequest();
    var startdate = document.forms["cat-sales"]["start-date"].value;
    var enddate = document.forms["cat-sales"]["end-date"].value;
    var url = "../report.jsp?start-date=" + startdate + "&end-date=" + enddate;
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
            document.getElementById("report-view").innerHTML = xmlhttp.responseText; 
        }
    };
    try {
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    } catch (e) {
        alert("unable to connect to server");
    }
}

我尝试将css链接和js src添加到report.jsp但是它在浏览器控制台上出错了我认为这是因为这两个文件（sales.jsp和report.jsp）是在两个不同的层面上。

然后我添加了相对于sales.jsp的链接路径，它给出了CSS错误。（例如：标题看起来很弯曲）

如何正确实现这一目标？

report.jsp如下：

<%@page import="java.lang.String" %>
<%@page import="java.util.List" %> 
<%@page import="java.util.ArrayList" %>
<%@page import="Model.CategorySales" %>
<%@page import="Model.Report" %>
<%@page import="java.sql.Date" %>
<%@page import="java.text.SimpleDateFormat" %>
<%@page contentType="text/html" pageEncoding="windows-1252" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Report</title>

</head>
<body>
<% 
    try {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        Date startDate = new Date(sdf.parse(request.getParameter("start-date")).getTime());
        Date endDate = new Date(sdf.parse(request.getParameter("end-date")).getTime());

        Report report = new CategorySales(startDate, endDate);

        List<List> data = report.getData();
        String[] fields = report.getOutputfields();

        if (null != data && null != fields) {
            int fieldCount = report.getOutputfieldCount();
%>
<table id="table_report" class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
        <%
            for (int i = 0; i < fieldCount; i++) {
        %>
        <th><%=fields[i]%>
        </th>
        <%
            }
        %>
    </tr>
    </thead>

    <tbody>
    <%
        for (int i = 0; i < data.size(); i++) {
            List<String> column = (ArrayList) data.get(i);
    %>
    <tr>
        <%
            for (int j = 0; j < column.size(); j++) {
        %>
        <td><%=column.get(j)%>
        </td>
        <%
            }
        %>
    </tr>
    <%
        }
    %>
    </tbody>

</table>
<%
        }

    } catch (Exception e) {

    }
%>

</body>
</html>

Answer 1

我在尝试了很多东西后想出了答案。

获取数据表功能的解决方案是在将$("#table_report").DataTable();添加到主文档后调用它。

function getReport() {
    var xmlhttp = new XMLHttpRequest();
    var startdate = document.forms["cat-sales"]["start-date"].value;
    var enddate = document.forms["cat-sales"]["end-date"].value;
    var url = "../report.jsp?start-date=" + startdate + "&end-date=" + enddate;
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
            document.getElementById("report-view").innerHTML = xmlhttp.responseText; 

            //--------------- Added this line ---------------
            $("#table_report").DataTable();
        }
    };
    try {
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    } catch (e) {
        alert("unable to connect to server");
    }
}

通过设置CSS文件的正确顺序来修复CSS错误。基本上它有一些重叠的组件。

通过AJAX显示数据表

1 个答案: