부트스트랩 datatable 사용시 ajax 데이터

조회수 1207회

현재 데이터테이블에 ajax통신을 사용하여 데이터를 입력중 서블릿호출 및 데이터 입력이 안되는 상황입니다.

https://datatables.net/manual/ajax 의 object of data 를 참고하였으나 작동하지않아 질문드립니다. 코드는 아래와 같습니다.

자바스크립트 코드입니다.

$(document).ready(function(){
            var table = $('#myTable').DataTable({
                ajax: 'notUsed.ad',
                columns: [
                {"data":'memNum'},
                {"data":'memId'},
                {"data":'memName'},
                {"data":'memGender'},
                {"data":'memPhone'},
                {"data":'nationCode'},
                {"data":'memPoint'},
                {"data":'memType'},
                {"data":'memStatus'},
                {"data":'enrollDate'},
                {"data":'noShow'}
                ]
            });
});

HTML코드입니다.

<table id="myTable" class="table table-bordered display">
    <thead>
        <tr>
            <th>회원 번호</th>
            <th>회원 아이디</th>
            <th>회원 이름</th>
            <th>회원 성별</th>
            <th>회원 전화번호</th>
            <th>회원 국적</th>
            <th>회원 포인트</th>
            <th>회원 타입</th>
            <th>회원 상태</th>
            <th>회원 가입일</th>
            <th>회원 노쇼</th>
        </tr>
    </thead>
</table>

서블릿입니다.

@WebServlet("/notUsed.ad")
public class TableMemSearch extends HttpServlet {
    private static final long serialVersionUID = 1L;
    public TableMemSearch() {
        super();
    }

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        ArrayList<Member> list = new AdminService().searchMember();

        JSONArray jArr = new JSONArray();
        JSONObject jobj = new JSONObject();

        for (Member m : list) {
            JSONObject jsonMember = new JSONObject();
            jsonMember.put("memNum", String.valueOf(m.getMemNum()));
            jsonMember.put("memId", String.valueOf(m.getMemNum()));
            jsonMember.put("memName", String.valueOf(m.getMemName()));
            jsonMember.put("memGender", String.valueOf(m.getMemGender()));
            jsonMember.put("memPhone", String.valueOf(m.getMemPhone()));
            jsonMember.put("nationCode", String.valueOf(m.getNationCode()));
            jsonMember.put("memPoint", String.valueOf(m.getMemPoint()));
            jsonMember.put("memType", String.valueOf(m.getMemType()));
            jsonMember.put("memStatus", String.valueOf(m.getMemStatus()));
            jsonMember.put("enrollDate",String.valueOf(m.getEnrollDate()) );
            jsonMember.put("noShow",String.valueOf( m.getNoShow()));
            jArr.add(jsonMember);
        }
        jobj.put("data", jArr);

        response.setContentType("application/json; charset=utf-8");
        response.getWriter().print(jobj);

데이터 샘플입니다.너무길어 일부분만 올리겠습니다.

{"data":
[
{"memNum":"1","memStatus":"Y","memName":"ADMIN","noShow":"0","memPhone":"01012340001","memType":"A","memGender":"M","memPoint":"0","enrollDate":"2019-09-05","memId":"1","nationCode":"1"},
{"memNum":"2","memStatus":"Y","memName":"OWNER","noShow":"0","memPhone":"01012340002","memType":"O","memGender":"M","memPoint":"0","enrollDate":"2019-09-05","memId":"2","nationCode":"2"},
{"memNum":"3","memStatus":"Y","memName":"USER","noShow":"0","memPhone":"01012340003","memType":"U","memGender":"M","memPoint":"0","enrollDate":"2019-09-05","memId":"3","nationCode":"1"},
{"memNum":"4","memStatus":"Y","memName":"ADMIN","noShow":"0","memPhone":"01012340004","memType":"A","memGender":"M","memPoint":"0","enrollDate":"2019-09-05","memId":"4","nationCode":"1"}
]
}

jobj에 data값으로 jArr을 넣은것은 데이터테이블 메뉴얼을 따라한것입니다.

결과 이미지입니다.

  • ./notUsed.ad를 GET 호출하면 나오는 응답도 올려주세요. 안 나올 리가 없는데 엽토군 2019.9.3 09:07
  • 따로 콘솔창에 오류나는것도없고 그냥 아무작동이없습니다. SCzedge 2019.9.3 19:19
  • 주소창에 notUsed.ad 치면 나오는거 복사해서 올려주세요 엽토군 2019.9.3 23:03
  • 질문에 추가수정했습니다. 이클립스콘솔창에도 특별한오류가 나오는것은없습니다. SCzedge 2019.9.4 01:59
  • 그러면 서블릿 문제네요. 엽토군 2019.9.4 08:16
  • 서블렛에서 response.getWriter().print()를통해서 보내는게아닌 다른방법이있나요? datatables메뉴얼에도 이쪽내용은 없더라구요 ㅠㅠ SCzedge 2019.9.4 10:14
  • 아니요........ 서블렛으로 프린트되는 결과요... 지금 막 json을 만들고 계시는데 그 json이 datatable이 원하는 형식에 안맞는 json일거라는 말씀입니다... 서블릿 문제라는 말은 그뜻입니다... 제가 원체 이해하기 어렵게 말씀드렸나보군요..... 엽토군 2019.9.4 11:49
  • 음... System.out.println으로 뽑아본 데이터값은 datatables 샘플이랑 똑같이나왓는데 이걸 어떻게 확인해보면 될지..으.. SCzedge 2019.9.4 13:06
  • 보여주실 수가 없는 부분인가요? 중요한 값은 그냥 대충 XXXXXX 이렇게 가리셔도 되니깐.. 엽토군 2019.9.4 16:29
  • 앗 아닙니다! 글수정했습니다 감사합니다!! SCzedge 2019.9.5 06:13
  • 현재 데이터가 매뉴얼의 Data array location 의 두번째Object with data property 예제와 동일하게 나옵니다. SCzedge 2019.9.5 06:45
  • 지금 보니 json 객체 순서와 컬럼 정의 순서가 틀리네요. 그 순서 맞춰서 다시해보시겠어요 엽토군 2019.9.5 10:27
  • 확인해보니 결과값은 동일하게 아무것도 나오지않았습니다 json객체 순서에 맞추면 컬럼위치를 조정이 불가능하다고 생각됩니다. SCzedge 2019.9.6 00:34
  • 테스트해본결과 ajax나 url 에서 아예 서블릿을 호출하지 못합니다. 이부분을 어떻게 해결하면 좋을까요? SCzedge 2019.9.6 00:35
  • ajax를 따로 빼서 실행하면 정상적으로 서블릿을 호출하지만, 데이터테이블안에 위치하면 서블릿을 호출하지 못합니다. SCzedge 2019.9.6 00:38
  • 혹시 데이터테이블css만 작동하고 자바스크립트가 작동하지않나싶어 css link주석처리해봣지만 데이터테이블은 정상적으로 불러오는것같습니다. SCzedge 2019.9.6 00:40
  • 죄송합니다 도움이 못될것 같네요. 어디 codepen.io 같은데서라도 돌려볼수 있으면 좋으련만 엽토군 2019.9.6 21:23
  • 아닙니다. 지금까지도와주셔서 너무 감사합니다. 제가 좀더 찾아보고 해보겠습니다. 감사합니다. SCzedge 2019.9.8 17:39

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)