jquery datatables onClick

我正在使用數據表jQuery插件來表示使用Servlet的JSP頁面內的數據庫信息。我試圖按照下面的教程：jquery datatables onClick

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

我試圖填充表後，我點擊提交表單上的按鈕，夫婦嘗試的我卡住了。

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

此小服務程序生成以下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"} 
          ] 
     }); 
    };

我刪除了$（文件）。就緒行加載這個小狗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頁面加載時，然後當我點擊提交按鈕表被填充了servlet返回的JSON數組的值。

任何關於如何實現這一目標的指針？

來源

2012-05-31 TrashCan

以下解決方案使用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); 
    } 
}

從服務器端的處理形式的信息，並用它可以用於你需要其他的東西從選定的行數據的彈出窗口。

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方法的最後返回false。感謝有人指出了這一點。（我會盡量在稍後找到你，並給出一些觀點。）更進一步，請參閱Succes參數，請參閱Jquery doc。

如果我後來想到一些重要的東西，我會在稍後添加這篇文章。

來源

2012-06-11 15:04:20 TrashCan

如果這是問題的答案，請確保您接受它。 –

我該怎麼做，我已經點擊答案按鈕並填寫我找到的答案。如果之後有什麼我需要做的，請告訴。 – TrashCan

自從我在這個網站上提出問題以來，我已經有一段時間了，但我相信應該有一個綠色的複選標記，點擊每個答案的選票。您應該提供對問題很好的答案，並選擇能夠回答您問題的答案。 –

而不是使用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-31 15:14:16

有一些我不明白的地方，當我看着服務器端的JSP示例腳本時，它做了和我的Servlet一樣的事情。它生成一個ResultSet對象，然後將其解析爲打印到頁面的JSON對象。據我的理解，這與填表無關。這仍然可以在服務器端或客戶端完成。您只能使用服務器來完成繁重的工作。（如果這是不正確的，請糾正我。）。您如何使用該JSON對象仍然取決於您。 – TrashCan

我試過你的Javascript例子，並且我得到了一些與正確打開和關閉（{}）元素有關的錯誤。我經歷了幾次，但我似乎無法弄清楚。有任何想法嗎？ – TrashCan

對不起，我的代碼相當馬虎。再試一次。 –

jquery datatables onClick

回答

相關問題