0

サーブレットを使用して JSP ページ内のデータベース情報を表すために、datatables jquery プラグインを使用しています。次のチュートリアルに従おうとしました：

http://www.codeproject.com/Articles/359750/jQuery-DataTables-in-Java-Web-Applications

フォームの送信ボタンをクリックした後、テーブルにデータを入力しようとしていますが、数回試行した後、立ち往生しています。

サーブレット コード:

package servlets;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.codehaus.jackson.JsonGenerationException;
import org.codehaus.jackson.map.JsonMappingException;
import org.codehaus.jackson.map.ObjectMapper;


import classes.DBConnection;

public class Search extends HttpServlet
{
    private static final long serialVersionUID = 1L;
    private int echo;
    private int totalrecords;
    private int totalDisplayRecords;

    public Search() 
    {
        super();
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
    {
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
    {
        String sEcho = request.getParameter("sEcho");

        Connection connect = new DBConnection().returnConnection();
        Map<String, String[]> parameters = request.getParameterMap();
        String sql = buildQuerytring(filterParameters(parameters));
        ResultSet rs = executeQuery(connect, sql);

        try {
            List<Object> aaData = buildAaData(rs);
            String JsonString = buildJsonResonse(aaData, sEcho);
            response.setContentType("application/Json");
            response.getWriter().print(JsonString);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    private ResultSet executeQuery(Connection connect, String sql)
    {
        ResultSet rs = null;
        try {
            PreparedStatement presmt = connect.prepareStatement(sql);
            rs = presmt.executeQuery();
        } 
        catch (SQLException e) {
            e.printStackTrace();
        }
        return rs;
    }

    private String buildQuerytring(Map<String, String> map)
    {
        String select = "SELECT messagecaseid, messagesubject, messagesender, messagereceiver FROM berichtenarchief";
        StringBuilder sb  = new StringBuilder(select);
        boolean mapIsEmpty = map.isEmpty();

        if(mapIsEmpty == false)
        {
            int counter = 0;
            for(Map.Entry<String, String> entry : map.entrySet())
            {
                sb.append(" WHERE " + entry.getKey() + "=" + entry.getValue());
                counter++;
                if(counter > 1)
                {
                    sb.append(" AND " + entry.getKey() + "=" + entry.getValue());
                }
            }
        }
        System.out.println(sb.toString());
        return sb.toString();
    }

    private Map<String, String> filterParameters(Map<String, String[]> parameters)
    {
        Map<String, String> searchParameters = new HashMap<String, String>();
        for(Map.Entry<String, String[]> entry : parameters.entrySet())
        {
            String[] value = entry.getValue();
            if(value[0].isEmpty() == false)
            {
                searchParameters.put(entry.getKey(), value[0]);
            }
        }
        return searchParameters;
    }

    private List<Object> buildAaData(ResultSet rs) throws SQLException, JsonGenerationException, JsonMappingException, IOException
    {
        List<Object> JsonArray = new ArrayList<Object>();
        ResultSetMetaData rsmd = rs.getMetaData();
        int colCount = rsmd.getColumnCount();
        int rowCounter = 0;

        while(rs.next())
        {
            Map<String, Object> JsonObject = new LinkedHashMap<String, Object>();
            for(int colCounter = 1; colCounter<=colCount; colCounter++)
            {
                String JsonString = rsmd.getColumnName(colCounter);
                String JsonValue = rs.getObject(colCounter).toString();
                JsonObject.put(JsonString, JsonValue);
            }
            JsonArray.add(JsonObject);
            rowCounter++;
        }
        this.totalrecords = rowCounter;
        return JsonArray;
    }

    private String buildJsonResonse(List<Object> aaData, String sEcho) throws JsonGenerationException, JsonMappingException, IOException
    {
        totalDisplayRecords = 10;
        Map<String, Object> jsonObject = new LinkedHashMap<String, Object>();
        ObjectMapper mapper = new ObjectMapper();

        jsonObject.put("sEcho", echo);
        jsonObject.put("totalRecords", totalrecords);
        jsonObject.put("TotalDisplayRecords", totalDisplayRecords);
        jsonObject.put("aaData", aaData);

        return mapper.writeValueAsString(jsonObject);
    }
}

このサーブレットは、次の JSON 出力を生成します。

{"sEcho":0,"totalRecords":1,"TotalDisplayRecords":10,"aaData":[{"xxxx":"xxxx","xxx":"xxxxxx","xxxxxx":"xxxxxx","xxxxxx":"xxxxxxx"}]}

この「構造」を使用したため、テーブルを生成する .js ファイルに次のコードを追加する必要がありました。

JS ファイル:

function generateTable () {
    $("#searchResults").dataTable({
        "bFilter" : false,
        "bServerSide": true,
        "sAjaxSource": "/ArchiveSearch/Search",
        "bProcessing": true,
        "sPaginationType": "full_numbers",
        "bJQueryUI": true,
        "aoColumns":    [
                                {"mDataProp": "xxxxxxxx"},
                                {"mDataProp" : "xxxxxxx"},
                                {"mDataProp" : "xxxxxxxx"},
                                {"mDataProp" : "xxxxxx"}
                            ]
        });
    };

$(document).ready 行を削除して、この子犬を onClick イベントでロードしました。私の JSP ファイルには、次のコードがあります。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link href="/ArchiveSearch/resources/css/style.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="/ArchiveSearch/resources/js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="/ArchiveSearch/resources/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" scr="/ArchiveSearch/resources/js/datatablesConfig.js"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>searchArchive</title>
</head>
<body>
        <div class="wrapper">
        <div class="navmenu">
            <ol>
                <li><a href="index.jsp" >Home</a></li>
                <li><a href="connection.jsp" >Archive Connection</a></li>
                <li><a class="current" href="searchArchive.jsp">Zoeken in archief</a></li>
            </ol>
        </div>
        <div class="content">
            <form action="/ArchiveSearch/Search" method="post">
            <div class="searchCiteria">
                <div id="searchValueBlock1">
                        <div><span class="label">xxxxxx:</span><input type="text" name="xxxxx"  size="25"/></div>
                        <div><span class="label">xxxxxx:</span><input type="text" name="xxxx" size="25" /></div>
                        <div><span class="label">xxxxxxx:</span><input type="text" name="xxxxxx"  size="25"/></div>
                        <div><span class="label">xxxxxxx:</span><input type="text" name="xxxxxxxx"  size="25"/></div>
                </div>

                <div id= "searchValueBlock2">
                    <div><span class="label">xxxxxxxx:</span><input type="text" name="xxxxxx"  size="25"/></div>
                    <div><span class="label"></span><input type="text" name="xxxxxx"  size="25"/></div>

                    <div class="submit">
                        <input type="submit" value="Search" onclick="generateTable()">
                    </div>
                </div>
            </div>
            </form>
            <div class="result">
                <div id="demo_jui">
                    <table id="searchResults">
                        <thead>
                            <tr>
                                <th>xxxxxxx</th>
                                <th>xxxxxxx</th>
                                <th>xxxxxxx</th>
                                <th>xxxxxxxx</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

JSPページがロードされたときに空のテーブルが生成されるようにすることができれば、最良の方法は、送信ボタンをクリックすると、サーブレットによって返されたJSON配列の値がテーブルに入力されることです。

これを達成する方法についての指針はありますか?

4

2 に答える 2

1

オプションを使用する代わりに、bServerSide手動で入力してみてはどうでしょうか?

var table;

function generateTable () {
    table = $("#searchResults").dataTable({
        "bFilter" : false,
        "sAjaxSource": "/ArchiveSearch/Search",
        "bProcessing": true,
        "sPaginationType": "full_numbers",
        "bJQueryUI": true,
        "aoColumns":    [
                {"mDataProp": "xxxxxxxx"},
                {"mDataProp" : "xxxxxxx"},
                {"mDataProp" : "xxxxxxxx"},
                {"mDataProp" : "xxxxxx"}
            ]
    });
};

$(document).ready(function(){
    $('.submit input').click(function(){
        $.getJSON('/ArchiveSearch/Search', function(data){
            table.fnAddData(data.aaData);
        });
    });
    generateTable();
});
于 2012-05-31T15:14:16.637 に答える
0

次のソリューションでは、サーブレットを使用した「事前フィルタリング」で Datatables サーバー側処理を使用します。

Servlet code:

package servlets;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.codehaus.jackson.JsonGenerationException;
import org.codehaus.jackson.map.JsonMappingException;
import org.codehaus.jackson.map.ObjectMapper;


import classes.DBConnection;

public class Search extends HttpServlet
{
    private static final long serialVersionUID = 1L;
    private int echo;
    private int totalrecords;
    private int totalDisplayRecords;

    public Search() 
    {
        super();
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
    {
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
    {
        Connection connect = new DBConnection().returnConnection();
        System.out.println(request.getParameter("formData"));
        Map<String, String> searchParameterMap = seperateFormString(request.getParameter("formData"));
        echo = Integer.parseInt(request.getParameter("sEcho"));
        String sql = buildQuerytring(searchParameterMap);
        ResultSet rs = executeQuery(connect, sql);


        try {
            List<Object> aaData = buildAaData(rs);
            String JsonString = buildJsonResonse(aaData, echo);
            response.setContentType("text/x-json;charset=UTF-8");
            response.setHeader("Cache-Control", "no-cache");
            response.getWriter().print(JsonString);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    private Map<String, String> seperateFormString(String formData){

        Map<String, String> searchParameterMap = new HashMap<String, String>();
        String[] strings = formData.split("&");
        for(String s : strings)
        {
            String[] parameters = s.split("=");
            int value = parameters.length-1;
            if(parameters.length>1){
                searchParameterMap.put(parameters[0], parameters[value]);
            }
        }
        return searchParameterMap;
    }

    private ResultSet executeQuery(Connection connect, String sql)
    {
        ResultSet rs = null;
        try {
            PreparedStatement presmt = connect.prepareStatement(sql);
            rs = presmt.executeQuery();
        } 
        catch (SQLException e) {
            e.printStackTrace();
        }
        return rs;
    }

    private String buildQuerytring(Map<String, String> map)
    {
        String select = "SELECT messagecaseid, messagesubject, messagesender, messagereceiver FROM berichtenarchief";
        StringBuilder sb  = new StringBuilder(select);
        boolean mapIsEmpty = map.isEmpty();
        int counter = 0;

        if(mapIsEmpty == false)
        {
            for(Map.Entry<String, String> entry : map.entrySet())
            {
                if(counter >= 1)
                {
                    sb.append(" AND " + entry.getKey() + " LIKE " + "'%" + entry.getValue() + "%'");
                }
                else if(counter == 0)
                {
                    sb.append(" WHERE " + entry.getKey() + " LIKE " + "'%" + entry.getValue() + "%'");
                }
                counter++;
            }
        }
        System.out.println(sb.toString());
        return sb.toString();
    }

    private List<Object> buildAaData(ResultSet rs) throws SQLException, JsonGenerationException, JsonMappingException, IOException
    {
        List<Object> JsonArray = new ArrayList<Object>();
        ResultSetMetaData rsmd = rs.getMetaData();
        int colCount = rsmd.getColumnCount();
        int rowCounter = 0;

        while(rs.next())
        {
            Map<String, Object> JsonObject = new LinkedHashMap<String, Object>();
            for(int colCounter = 1; colCounter<=colCount; colCounter++)
            {
                String JsonString = rsmd.getColumnName(colCounter);
                String JsonValue = rs.getObject(colCounter).toString();
                JsonObject.put(JsonString, JsonValue);
            }
            JsonArray.add(JsonObject);
            rowCounter++;
        }
        this.totalrecords = rowCounter;
        return JsonArray;
    }

    private String buildJsonResonse(List<Object> aaData, int echo) throws JsonGenerationException, JsonMappingException, IOException
    {
        totalDisplayRecords = 10;
        Map<String, Object> jsonObject = new LinkedHashMap<String, Object>();
        ObjectMapper mapper = new ObjectMapper();

        jsonObject.put("sEcho", echo);
        jsonObject.put("iTotalRecords ", totalrecords);
        jsonObject.put("iTotalDisplayRecords ", totalDisplayRecords);
        jsonObject.put("aaData", aaData);

        return mapper.writeValueAsString(jsonObject);
    }
}

サーバー側の処理によるフォームからの情報、および必要な他のものに使用できる選択された行からのデータを含むポップアップ。

JQuery コード:

var table;
var gaiSelected =  [];

$(document).ready(function() {
    $("#searchResults").dataTable({
        "bJQueryUI": true
        });
    $('.searchsubmit').click(function() {
        var formData = $('form').serialize();
        table = $("#searchResults").dataTable({
            "bDestroy": true,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": 'Search',
            "sServerMethod": "POST",
            "aoColumns": [
                          { "mDataProp": "xxxxxxx" },
                          { "mDataProp": "xxxxxxx" },
                          { "mDataProp": "xxxxxxxx" },
                          { "mDataProp": "xxxxxxxxx" }
                      ],
            "fnServerParams": function ( aoData ) {
                aoData.push({"name": "formData", "value": formData}
                        );
            }
        });
        return false;
    });

     $('#searchResults tbody tr').live('dblclick', function () {
         var aData = table.fnGetData( this,0 );
         alert(aData);
            });
});

重要: onClick メソッドの最後で return false を使用してください。それを指摘してくれてありがとう。(後であなたを見つけて、いくつかのポイントを与えようとします。) さらに touti、Succes パラメータは必要ありません。Jquery doc を参照してください。

後で重要なことを思いついたら、後で投稿に追加します。

于 2012-06-11T15:04:20.060 に答える