Jquery datatables onClick

서블릿을 사용하여 JSP 페이지 내에서 데이터베이스 정보를 나타 내기 위해 datatables jquery 플러그인을 사용하고 있습니다. 나는이 (가) 커플 시도의 내가 끼 었어 후, 폼에 제출 버튼을 클릭 한 후 테이블을 채우기 위해 노력하고Jquery datatables onClick

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

: 나는 다음 튜토리얼을 따라하려고 노력했다.

서블릿 코드 :이 "구조"를 사용하기 때문에 내가 생성의 .js 파일에 다음 코드를 추가했다

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

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 출력을 생성 탁자.

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

내가 $ (문서)를 제거 .ready 행은 onClick 이벤트로이 강아지를로드합니다. 내 JSP 파일에서 나는 다음과 같은 코드를 가지고 : 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>

가 가장 좋은 일이 될 것를, 그때 제출 버튼을 테이블을 클릭하면 서블릿에 의해 반환 된 JSON 배열의 값으로 채워집니다.

어떻게하면이 문제를 해결할 수 있습니까?

출처

2012-05-31 TrashCan

다음 솔루션은 서블릿을 사용하여 '사전 필터링'과 함께 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); 
      }); 
});

중요 : 사용은 당신의 온 클릭 방식의 끝에서 false를 돌려줍니다. 그걸 지적 해 주신 분께 감사드립니다. (나는 나중에 당신을 발견하고 몇 가지 포인트를 주려고 노력할 것이다.) Succes 매개 변수는 더 이상 필요하지 않다. Jquery doc.

나중에 중요한 사항을 생각하면 나중에이 내용을 게시물에 추가합니다.

출처

2012-06-11 15:04:20 TrashCan

질문에 대한 대답 인 경우 수락해야합니다. –

그리고 어떻게 그럴 수 있습니까, 나는 이미 대답 버튼을 클릭하고 내가 찾은 대답을 채웠습니다. 그 후에해야 할 일이 있으면 알려주십시오. – TrashCan

이 사이트에서 질문을 한 지 꽤 오래되었지만 각 답마다 득표를 클릭하면 녹색 체크 표시가 있어야한다고 생각합니다. 당신은 질문에 대한 좋은 대답 인 대답을 upvote해야하고, 당신의 질문에 대답하는 대답을 체크하십시오. –

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 예제 스크립트를 보면 서블릿과 동일한 기능을 수행합니다. ResultSet 객체를 만든 다음 JSON 객체로 구문 분석하여 페이지에 인쇄합니다. 내 이해를 위해 이것은 테이블을 채우는 것과 아무런 관련이 없다. 이는 서버 측 또는 클라이언트 측에서 모두 수행 할 수 있습니다. 당신은 무거운 짐을하기 위해서만 서버를 사용합니다. (올바르지 않으면 수정하십시오.) JSON 개체를 사용하는 방법은 당신에게 달려 있습니다. – TrashCan

자바 스크립트 예제를 시도했는데 올바르게 ({}) 요소를 열고 닫는 것과 관련된 몇 가지 오류가 발생합니다.나는이 두 번에 걸쳐 갔지만, 나는 그것을 알아낼 수 없다. 어떤 아이디어? – TrashCan

죄송합니다, 제 코드는 상당히 엉성했습니다. 다시 시도하십시오. –

Jquery datatables onClick

답변

관련 문제