채팅리스트 올릴때 append 1번째

나이많은 초보 2022. 10. 28. 11:25

Ajax으로 DB 데이터를 받아오면서 계속 글을 올려와야 하는 경우가 있다. 이럴경우 처음엔 계속 그냥 APPEND사용해서 받았는데...화면 깜빡임이 아주 심하다.

 /// 리스트 반복 출력구간  //이때 db on/off버튼도 컨트롤러에서 변경한다.
    
   function printList(){
	    $('tbody').html('');
    	$.ajax({
         url:"/consult/chatSession.kh",
         type:'get',
         //data:requestTime,                   
         dataType:"json",
         success:function(result) {
        	 var count=0;
         	 for (var i in result){
            	   var a='<tr>'+
            			'<td name="info'+i+'" scope="row">'+result[i].titleNo+'</td>'+
                		'<td name="info'+i+'" scope="row">'+result[i].csMemberId+'</td>'+
                        '<td name="info'+i+'" scope="row">'+result[i].csTitle+'</td>'+                            
                        '<td name="info'+i+'" scope="row">'+result[i].csDate+'</td>'+ 
                        '<td name="info'+i+'" scope="row">'+result[i].csResult+'</td>';
			    if(result[i].csResult=='N'){
			    		count+=1;
            			a+='<td><input type="button" onclick="serverchat('+i+');" value="상담시작"></td>';
                }else{
                	a+='<td></td>';
                }
			   
                $('tbody').append(a);
                $('#count').html(count);
              }
                
		  }        	
      })
   };

데이터를 없애고

$('tbody').html('');

다시 넣고.

$('tbody').append(a);

컴입장에서는 뭐하는 것이냐..........

회사 기업도 아니고 주는 데이타도 코딱지 만하고 새로 들어올 데이터도 없는데 계속 산을 옮기라고 하는것 같다.....옛날 아저씨들 이해한다...ㅋㅋ

그래서 새로 배웠던 데이터를 써먹어 본다.

전에 배웠는데 그냥 듣기만 한거라 다시 떠듬떠듬 검색 했다..

var $chatList=$('tbody>tr[data-titleNo="'+ result[i].titleNo +'"]');

https://www.nextree.co.kr/p10155/

jQuery: data() 이해와 활용

jQuery를 조금이나마 접해보신 분들은 다양한 방법으로 DOM을 select하거나 이벤트 제어, Ajax통신 등 jQuery가 지원하는 편리한 기능에 많이 익숙해지셨을 거라 생각됩니다. 이번에 준비한 글은 매우

www.nextree.co.kr

https://developer0513.tistory.com/199

jquery data() 함수

jQuery data-xx 속성을 추가해주는 data()함수에 대해 HTML5는 개발자가 DOM 객체에 데이터를 저장해두기 위해 속성을 아무렇게나 정의해서 사용하지 않도록 data-xxx와 같이 data-로 시작하는 속성을 사용

developer0513.tistory.com

이렇게 추가했더니. 깜박거림이 없어졌다...일단 추가한 데이터가 없다.ㅋㅋㅋ

/// 리스트 반복 출력구간  //이때 db on/off버튼도 컨트롤러에서 변경한다.
		var count = 0;
		function printList() {
			//  $('tbody').html('');
			$.ajax({
				url : '/consult/chatSession.kh',
				type : 'get',
				dataType : 'json',
				success : function(result) {
					for ( var i in result) {
						var $chatList = $('tbody>tr[data-titleNo="'
								+ result[i].titleNo + '"]');
						if ($chatList.length < 1) {
							addChatList(i, result[i].titleNo,
									result[i].csMemberId, result[i].csTitle,
									result[i].csDate, result[i].csResult);
						};
					};					
				}
			})
		};
		//리스트 넘겨받아서 출력해준다.
		function addChatList(i, titleNo, csMemberId, csTitle, csDate, csResult) {
			console.log("titleNo : " + titleNo);
			var a = '<tr data-titleNo="'+ titleNo +'">'
					+ '<td name="info'+i+'" scope="row">' + titleNo + '</td>'
					+ '<td name="info'+i+'" scope="row">' + csMemberId
					+ '</td>' + '<td name="info'+i+'" scope="row">' + csTitle
					+ '</td>' + '<td name="info'+i+'" scope="row">' + csDate
					+ '</td>' + '<td name="info'+i+'" scope="row">' + csResult
					+ '</td>';
			if (csResult == 'N') {
				count += 1;
				a += '<td><input type="button" onclick="serverchat(' + i
						+ ');" value="상담시작"></td></tr>';
			} else {
				a += '<td></td></tr>';
			}

			$('tbody').append(a);
			$('#count').html(count);
		}

for문에서 비교해주고 addChatList() 로 넘어간다 화면 깜빡임이 줄어들었다.