개발 Q&A

제목 ajax로 받은 데이터를 그린 후...질문입니다.
카테고리 JavaScript
글쓴이 소연신 작성시각 2017/05/08 16:20:51
댓글 : 9 추천 : 0 스크랩 : 0 조회수 : 15298   RSS

1. 데이터를 넘기고

$(".board_list_style > ul").find("li").detach();
board_draw.set_board_notice_list(data);

 

2. 그립니다.


set_board_notice_list: function(data) {

            var bigdata = data['lists'];

            if(!bigdata.length)
            {
                $(".board_list_style > table > tbody").append($("<td>",{'colspan':6}).text('게시글이 없습니다.'));
                return false;
            }
            var $item = $(document.createDocumentFragment());

            $.each(bigdata, function() {

                var tr_list = '';
                var btype = this['btype'];
                var bid = this['bid'];
                var nickname = this['nickname'];
                var subject = this['subject'].slice(0, 40);
                //var contents = this['contents'];
                var reg_date = this['reg_date'].slice(0, 10);
                var hits = this['hits'];
                var level = this['level'];
                var recommend = this['recommend'];
                var mem_idx = this['mem_idx'];

                $item += '<tr>';

                if (btype == 'event') {
                    $item += '    <td><img src="/static/images/board/icon_event.png" alt="이벤트" /></td>';
                } else {
                    $item += '    <td><img src="/static/images/board/icon_notice.png" alt="공지" /></td>';
                }

                $item += '    <td class="td_title"><a href="/Board/view/' + btype + '/' + bid + '/' + g_page_no + '">';
                if(id == bid) {
                    $item += '        <img src="/static/images/icon_txt.png" alt="" /><strong class="view_list_tit">' + subject;
                }
                else {
                    $item += '        <img src="/static/images/icon_txt.png" alt="" />' + subject;
                }
                $item += '    </a></td>';
                $item += '    <td class="nickname" memidx="' + mem_idx + '"><img src="/static/images/level'+ level +'.png" alt="" />' + nickname + '</td>';
                $item += '    <td>' + reg_date + '</td>';
                $item += '    <td>' + hits + '</td>';
                $item += '    <td>' + recommend + '</td>';
                $item += '    </tr>';


            });
            $(".board_list_style > table > tbody").append($item);
        },

뭐 이런 식으로... 형태와 스타일은 다르지만 append해서 틀과 함께 데이터를 넘깁니다. 

여태 이런 식으로 해왔는데요.

 

밑에 코드를 보면.. 데이터 뿐만 아니라 태그 까지 계속 그립니다. 저게 게시판 리스트라고 치면 처음에 게시판 리스트를 그리고... 그 이후에는 데이터만 넣으면 되잖아요? 틀은 똑같으니까. 근데 그걸 어떻게 해야 될지 모르겠네요 질문을 어디다 해야 될지도 모르겠고ㅜ 검색도 어떻게 해야될지 모르겠고 해서 여기다 글 남겨봅니다.

 다음글 이 홈페이지 만드신분? 글쓰기 페이지에서 ck에디터 관... (3)
 이전글 DBA이신분들께 mysql 서버 연동에 대해 문의 하고... (2)

댓글

배강민 / 2017/05/08 16:55:39 / 추천 0

여태 이런 식으로 해오셨다고 하는데, 기존과 뭐가 다른데 모르겠다고 하시는건지 모르겠습니다.

기존에는 데이터 없이 그리는것만은 해왔고, 이번에는 데이터를 가져와서 넣어야하는게 그걸 못하시겠다는건가요? 

소연신 / 2017/05/08 17:16:13 / 추천 0

@배강민

아니요 지금까지 한 거는 데이터+틀을 계속 같이 그립니다.(위에 쓴거와 같이) 거기서 틀은 한 번만 그리고 그 후에는 데이터만 그리고 싶다는 거죠. 그 부분을 오늘 지적받았는데..감을 못잡겠어서요. 어떻게 데이터만 틀에 넣어야 될지요.

개락 / 2017/05/08 17:20:28 / 추천 0

데이터만 어떻게 표현을 하는걸까요..

기존에 만든 테이블안에 데이터를 변경하셔야한다는 건가요?

위 글만 봤을때는 게시판 리스트를 ajax로 가져와서 뿌리신거 같은데 별도에 처리가 필요하단건가요?

소연신 / 2017/05/08 17:24:23 / 추천 0

@개락

저도 데이터만 뿌린다는 게 이해가 잘 안되서요.... 게시판 리스트로 예를 들면 페이징이 있으니까 페이징을 넘기면 ajax를 다시 호출해서 데이터를 받아오고 그리잖아요? 다시 그릴 때, 틀은 이미 한 번 그렸으니 그 틀에 데이터만 넣어라...는 건데...ㅜㅜ

개락 / 2017/05/08 17:32:38 / 추천 1

음.. 어떤 부분이 문제이고 지적을 받으신건지 명확하지 않아서 말씀드리기가 조심스럽긴한데..

일반적으로 ajax작업은 서버단에 태그+데이터까지 모두 만들어서 html로 리턴받거나 위처럼 값을 xml이던 json이던 값을 받아서 html에 넣어서 추가로 넣거나 바꾸거나 해요..

그걸 다른방식으로 기존 만들어진 html코드에 값을 하나하나 맞춰서 넣는건 바꿀때야 상관없지만 append할때는 어차피 html불러와야하는데 무슨 의미가 있나 싶네요..^^;;

소연신 / 2017/05/08 17:56:52 / 추천 0

@개락

일단 직접 물어봐야겠네요 ㅋㅋㅋ 답변 고맙습니다. 즐겨운 저녁 되세요

kaido / 2017/05/08 20:50:47 / 추천 0

보아하니 게시판 리스트 인듯 싶네요.

그리고 ajax 페이지네이션 관련 처리를 하고 계신게 아닌지 유추 됩니다.

 

append으로 처리 하신다면 기존것은 "지우고" 그리셔야 합니다.

html 으로 처리 하면 그냥 넣어셔도 됩니다. [덧쓰우기 이기 때문]

 

만일 이미 그려진 table 위에다 값만 교체해서 넣고 싶으시다면 각각의 행에 넘버링을 해서 구분을 짓고, 각각의 값에 구분이 되는 id 값을 넣어야 합니다.

특별하게 이유가 없다면 틀을 지우고 다시 넣으시는게 차라리 속도면이나 로직면이나 좋습니다.

 

야리 / 2017/05/09 01:17:20 / 추천 0

틀은 유지하고 데이터만 바꾼다는게 유지보수를 위한 어떤 템플릿함수를 사용하라 뭐 그런건 아니고서야 그냥 tbody 내부 새로 그리는게 나아요.

근데 제가 이 코드는 볼땐 딴게 문제같은데요. detach는 메모리에 남기때문에 remove 하시는게 좋아보이고 $item 선언을 그냥 빈스트링으로 바꾸셔야할 것 같아요. 아마 jquery 래핑된 객체 tostring으로 엉터리 태그가 됐기 때문에 table에선 무시된것 같은데

 

소연신 / 2017/05/10 10:01:56 / 추천 0

@야리

detach()가 성능면에서 더 낫다는 글을 본 거 같았는데 아닌가요? 

http://yubylab.tistory.com/entry/jQuery-jQuery-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94

 

$(document.createDocumentFragment());

이거 같은 경우는..음. 제이쿼리 성능 관련해서 찾아보다가 발견해서 사용해 본 건데.. 뭔가 체감상으론 별로 느껴지진 않지만 속도면에선 '조금'은 빨라져서 사용했습니다. 이것도 문제가 될까요?

@kaido

css를 다시 그리는 비용도 줄이라는 소리같은데.. 어떻게 할 지 다시 여쭤봐야겠네요. 고맙습니다.