Javascript jquerydatatables onClick

我正在使用datatables jquery插件使用Servlet表示JSP页面中的数据库信息。我尝试遵循以下教程：

单击表单上的“提交”按钮后，我正在尝试填充表格 当然，我被卡住了

servlet代码：

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);
    }
}

因为我使用了这个“结构”，所以我必须将以下代码添加到生成表的.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>

搜索档案



xxxxxx：
xxxxxx：
xxxxxxx：
xxxxxxx：
xxxxxxxx：
xxxxxxx
xxxxxxx
xxxxxxx
xxxxxxxx

最好的办法是，如果我能够在加载JSP页面时生成一个空表，那么当我单击submit按钮时，该表将填充servlet返回的JSON数组的值

---

有没有关于如何实现这一点的建议？

与其使用

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();
});

---

以下解决方案使用Datatables服务器端处理，并使用servlet进行“预筛选”

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);
    }
}

重要提示：在onClick方法的末尾使用returnfalse。谢谢有人指出这一点。（稍后我将尝试找到您并给出一些要点。）进一步说明，success参数不是必需的，请参阅Jquery文档

---

如果我以后想到一些重要的东西，我会在后面的文章中添加它。

有一些东西我没有得到，当我看服务器端JSP示例脚本时，它做的事情与我的Servlet做的一样。它生成一个ResultSet对象，然后将其解析为JSON对象，并打印到页面上。据我所知，这与填表无关。这仍然可以在服务器端或客户端完成。您只能使用服务器来完成繁重的工作。（如果这不正确，请纠正我。）。如何使用JSON对象仍然取决于您。我尝试了您的Javascript示例，发现了一些与正确打开和关闭（{}）元素相关的错误。我看了好几遍了，但我似乎没弄明白。有什么想法吗？我通过服务器端处理解决了这个问题，想让我发布代码吗？将其作为答案发布，然后接受它以结束问题。如果这是问题的答案，请确保您接受它。我如何做到这一点，我已经单击了“答案”按钮并填写了我找到的答案。如果在那之后我需要做什么，请告诉我。我已经有一段时间没有在这个网站上提问了，但我相信在每个答案的投票上方都应该有一个绿色的复选标记。你应该投票选出正确答案，并勾选回答你问题的答案。完成，谢谢。下次发帖时我会记住这一点。

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);
    }
}

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);
            });
});