通過AJAX顯示數據表

我想通過ajax調用顯示數據表。通過AJAX顯示數據表

有一個sales.jsp，它有2個輸入的開始日期和結束日期。還有另一個report.jsp，它讀取它的請求參數並計算數據並將它們顯示在數據表中（jQuery插件）

所用文件和文件夾的文件夾結構如下，JS庫位於js文件夾中：

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

的AJAX上sales.jsp如下：

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>

來源

2017-03-09 SachiDangalla

嗯，我想出了答案嘗試了很多事情之後。

獲取數據表功能的解決方案是在將其添加到主文檔後調用$("#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錯誤。基本上它有一些重疊的組件。

來源

2017-03-10 01:50:35 SachiDangalla

通過AJAX顯示數據表

回答

相關問題