私はdatatablesテーブルをajax呼び出しで表示しようとしています。AJAXを介してデータテーブルを表示
sales.jsp
があり、開始日と終了日が2つあります。要求のパラメータを読み取り、データを計算してデータテーブル(jQuery-plugin)に表示する別のreport.jsp
があります。
使用するファイルとフォルダのフォルダ構造は次のとおりです.JSライブラリはjs
フォルダにあります:次のようにsales.jsp
上
js
admin
|--report.jsp
|--sales
|--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");
}
}
私はreport.jspにCSSのリンクやJSのsrcのを追加しようとしたが、それはブラウザのコンソールにエラーを与え、私は目を考え出し2つのファイル(sales.jsp
とreport.jsp
)が2つの異なるレベルにあるためです。
次に、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>