javascript 함수를 사용하여 dymanic html table (jquery datatable plugin) 출력하기

Question

Ok 그래서 저는 지금 당분간이 문제를 해결하고 철저히 연구했습니다. 우선 Spring Tool Suite - MVC Project를 사용하고 있습니다. .jsp 페이지에서 작업하기

MySql 데이터베이스의 데이터를 기반으로하는 dataTables (jQuery 플러그인) 테이블에 링크되는 HTML 테이블을 동적으로 만들고 편집하는 최선의 방법을 알아 내려고합니다. .

사용자가 다른 사용자 입력 .... 버튼, 가격 범위 입력 등을 기반으로 테이블을 업데이트 할 수 있기를 원합니다.

지금까지 조사한 가장 좋은 방법은 js 함수 내부에서 테이블을 작성한 다음 테이블을 변경하거나 추가하거나 업데이트하거나 다른 작업을 수행 할 다른 함수를 만드는 것입니다. 나는 지금까지 할 수있는 최선의 방법으로 java를 사용하여 databsae에 연결하고 데이터베이스에서 데이터를 성공적으로로드하고 표시하는 SINLGE 테이블을 만들 때 함수를 사용하여 데이터 테이블을 만드는 운이 없다. 문제는 내가 변경할 수 없다는 것이다. 테이블을로드 한 후 새 SQL 쿼리를 기반으로 테이블을 새로 고치는 모든 시도가 실패했습니다.

Datatables에는 테이블에 행을 추가하는 데 사용할 수있는 꽤 큰 API가 있지만 테이블 업데이트와 같이 유용하게 보일 수있는 다른 함수는 작동하지 않습니다.

내 접근 방식을 완전히 다시 생각해야한다면 생각이 들었습니다. 어떤 접근 방식을 취해야합니까?

필요하다면 내가 코드를 게시 할 예정입니다

그래서 여기

Answer 1

<% 
ArrayList<ArrayList<String>> aaList = new ArrayList<ArrayList<String>>(); 
ResultSet rs; 
    Statement statement = null; 
    Class.forName("com.mysql.jdbc.Driver"); 
    Connection conn = DriverManager.getConnection("jdbc:mysql://ics321instance.cglh44ydeyny.us-east-1.rds.amazonaws.com/ics321", "user", "password"); 
    statement = conn.createStatement(); 
    //this query should return all items 
    rs = statement.executeQuery("select * from Product where price < 10;"); 

    int counter=1; 
    ResultSetMetaData metaData = rs.getMetaData(); 
    %> 

    <table id = "example"> 
    <thead> 
     <tr> 
      <% 
      for(int q = 1; q<=metaData.getColumnCount();q++) 
      {%> 
       <th><%= metaData.getColumnName(q)%></th> 
      <% 
      } 
      %> 
     </tr> 
    </thead> 
    <tbody> 
      <% 
      while(rs.next()) 
      { 
      %> 
       <tr> 
       <% 
       for(int i = 1; i<=metaData.getColumnCount();i++) 
       {%> 
        <td><%= rs.getString(i)%></td> 
       <% 
       } 
       %> 
       </tr>     
      <% 
      } 
      %> 
    </tbody> 
</table> 

제가 DB에 연결을하고, JSP에 쿼리를 실행하고 사전에 감사합니다 -이 나쁜 연습 알고 있지만 내가 헤더에 다른 방법

을 파악하지 못할 내 JS가

$(function() { 
    $("#example").dataTable({ 
     "sScrollY": "400px", 
     "bPaginate": false, 
     "bScrollCollapse": true 
    }); 
} 

올바른 방법은 내 컨트롤러 내부에서 JDBCTemplate을 사용하는 것이 겠지만 내 .jsp 파일 내부에서 해당 데이터를 참조하는 방법을 잘 모르겠습니다.

다시 한 번 내 목표는 테이블 (datatables jquery plugin)을 사용하고 jsp 페이지, 버튼, 텍스트 입력 등의 사용자 상호 작용을 기반으로 해당 테이블을 업데이트하는 것입니다.

테이블을 다시 그리기로되어있는 datatables api - fnDraw() 메소드가 부족합니다.하지만이 함수를 어디에 넣어야할지 모르겠습니다.

감사합니다.