부트스트랩 데이터테이블 사용시 데이터 입력

조회수 742회

부트스트랩에 데이터테이블을 사용할때 데이터값이 들어가지 않는 문제입니다.

jsp 스크립트

var data2;
var StringData;
$(document).ready(function(){
        $.ajax({
            url:"MemSearchTable.ad",
            type:"post",
            success:function(data1){
                $("#h1").val(data1);
                data2 =$("#h1").val();

                console.log(data2);
                console.log(StringData);
            },
        });
        $('#myTable').DataTable({
            data : data2,
            columns: [
                {data:'memNum'},
                {data:'memId'},
                {data:'memName'},
                {data:'memGender'},
                {data:'memPhone'},
                {data:'nationCode'},
                {data:'memPoint'},
                {data:'memType'},
                {data:'memStatus'},
                {data:'enrollDate'},
                {data:'noShow'}
            ]
        });
});

#h1은 HTML 인풋 히든입니다. data1은 서블릿에서 JSONObject를 JSONArray에 담아서 정상적으로 가져옵니다. 가져온 데이터 샘플입니다.

data2

[
{"memNum":1,
"memStatus":"Y",
"memName":"ADMIN",
"noShow":null,
"memPhone":"01012340001",
"memType":"A","memGender":"M",
"memPoint":0,
"enrollDate":2019-08-29,
"memId":"admin"
,"nationCode":1}
]

값을 잘 받아왔는데 왜 안들어가는지 잘 모르겠습니다. 답변 부탁드립니다. 감사합니다.

1 답변

  • 왜 안들어가냐면... DataTables의 자료를 AJAX로 받는 제대로 된 방법이 따로 있기 때문이지요. 공식적으로 옵션이 지원되고 있거든요. 일단 문서를 잘 읽어보시고 나면, 이제 소스를 이렇게 고쳐서 다시 시도해 봐야겠다는 생각이 드실 겁니다.

    $('#myTable').DataTable({
        // 이거 중요
        ajax: {
            url: 'MemSearchTable.ad',
            type: "POST", // 지금 보니 해당 서블릿은 POST 요청을 해야되는가 보네요.
            dataSrc: ''
        },
        columns: [
            {data:'memNum'},
            {data:'memId'},
            {data:'memName'},
            {data:'memGender'},
            {data:'memPhone'},
            {data:'nationCode'},
            {data:'memPoint'},
            {data:'memType'},
            {data:'memStatus'},
            {data:'enrollDate'},
            {data:'noShow'}
        ]
    });
    

    이 방식은 이제 #h1이 필요 없습니다.

    • 이미 같은방법으로 시도해 봣는데 안되서 저렇게 바꿨습니다 ㅠㅠ.... SCzedge 2019.8.31 19:15
    • 안될이유 없는데.. MemSearchTable.ad 는 정상 콜 되나요? 상대경로 문제 같은것 때문에 이 URL에 접근못하는거 아니에요? 애초에 Datatable이 그리는 테이블은 js가 만든 객체가 동적으로 그리는 거라서, 그 객체에게 데이터를 넘겨줘야 하지 임의로 append시키면 오동작만 더 발생해요. 다시 해봐주시겠어요? 엽토군 2019.8.31 20:25
    • 답변달아주신대로하면 서블릿호출을 못해서 첫번째 방법으로 접근했는데 서블릿호출은되도 데이터가 안들어가더라구요 SCzedge 2019.9.1 17:46
    • 지금 보니 해당 서블릿은 GET으로는 요청못하고 POST로만 요청할수 있나 보네요. 답변 수정했으니 한번 다시 시도해보시겠어요? 엽토군 2019.9.2 00:16
    • 제가 질문을 답변주시기 어렵게 작성한것같아 질문을 새로 올렸습니다 한번 확인해주시면 정말감사드리겠습니다.https://hashcode.co.kr/questions/8718/%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9-datatable-%EC%82%AC%EC%9A%A9%EC%8B%9C-ajax-%EB%8D%B0%EC%9D%B4%ED%84%B0 SCzedge 2019.9.3 02:22

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

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

(ಠ_ಠ)
(ಠ‿ಠ)