2017-03-09 6 views
0

私は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.jspreport.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> 

答えて

0

まあ、私は多くのことを試した後、答えを考え出しました。

データテーブル機能を取得するソリューションは、メイン文書に追加された後に$("#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ファイルの正しい順序を設定することで修正されました。基本的には、いくつかの重複するコンポーネントがありました。

関連する問題