편집 기록

프로필 nowp님의 편집

날짜2019.09.24

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

bootstrap

ajax

datatables

현재 데이터테이블에 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을 넣은것은 데이터테이블 메뉴얼을 따라한것입니다.

결과 이미지입니다.

프로필 SCzedge님의 편집

날짜2019.09.05