JQuery와는 : 테이블 내용을 업데이트

Question

을 너무 오래 걸립니다 나는 JQuery와 아약스는 다음과 같은 코드를 사용하여, 단절에서 테이블의 내용을 얻기 위해 사용이 잘 작동

success: function(data) 
{ 
    //once I get the data, remove the old content from table 
    $('.tableBody').empty(); 

    // then repopulate the table 
    $.each(data, function(key,val) { 
     //process the data, add different icons, texts...,append it to my table 
     showTable(key, val); 
    }); 
} 

. 그러나 문제는 테이블에 많은 행이 있으므로 다시 채우기 위해 약 300 밀리 초가 걸리므로 (empty()은 약 10 밀리 초만 걸립니다) 잠시 동안 테이블이 비어 있습니다.

어쨌든 "empty()"과 "showTable()" 사이에 애니메이션을 추가하여 빈 화면이 나타나지 않도록 원활하게 전환 할 수 있습니까?

Answer 1

(또는 그 전에도) 로딩 애니메이션을 보여주고 물건을 만든 다음 양식/표를 다시 보여줍니다.

기본 예제의 종류 .. 제출시 클릭하면 애니메이션로드를 표시하고 양식을 숨 깁니다. 물건 (AJAX 요청)을 수행 한 다음로드 애니메이션을 숨기고 양식을 다시 표시하십시오.

<img class="loading" src="http://www.link-to-loading-anim.com/loading.gif"/> 
    <form method="post"> 
    <input value="Click Me" type="submit"/> 
</form>​ 

자바 스크립트

: 여기

// On dom ready, hide our loading animation 
$('img.loading').hide(); 

// on form submit, show the animation, 
$('form').submit(function(e){ 
    e.preventDefault(); // we dont really need to submit the form!! 

    // Show our loading animation 
    $('img.loading').fadeIn(); 

    // Optional: Hide the form.. 
    $('form').hide(); 

    // Do something here.. (AJAX Request) 
    // - Your success of AJAX request.. 

    // Hide the image loader on success.. (setTimeout used for demo purposes) 
    setTimeout(hideImageLoader, 2000); 

}); 

function hideImageLoader(){ 
    $('img.loading').fadeOut('slow', function(){ 
     $('form').show(); 
    }); 
} 
​ 

는 기본 로딩 애니메이션 예를 들어 JSfiddle입니다.

Answer 2

내가 당신이라면 나는 이전 테이블을 slideUp (또는 더 나은 맨 위에 반 불투명 한 흰색 DIV 배치) 및 화면 밖으로 새 테이블을 준비하는 것, 단순히 내용 및 slideDown (또는 fadeOut 흰색 DIV 경우 교체 당신은 showTable()이되어 무엇을하고 있는지 "다른 아이콘을, 데이터를 처리 추가, 텍스트 ..., [당신] 테이블에 추가"

Answer 3

경우,이 메소드), 다음이 같을 수를 선택 :

$.each(data, function(key, val){ 
    $('.tableBody').append(key +' - '+ val); 
}); 

먼저 알아둬야 할 점은 HTML을 다음과 같은 길이의 문자열로 유지하는 것이 더 빠릅니다. 가능한 한 그것을 jQuery 객체에 넣고 여러 번 추가 할 여러 jQuery 객체를 만드는 대신 DOM에 추가하십시오. 그래서 당신은 같은 일을 더 나을 수 있습니다 :

var tableContents = ''; 
$.each(data, function(key,val){ 
    tableContents += key +' - '+ val; // generate whatever HTML you need 
}); 
$('.tableBody').append(tableContents); 

을 그리고 당신은 단지 그것을 다시 채우기 전에 테이블을 비울 수 있습니다 : 당신이 당신의 AJAX 콜백에서 데이터를 수신 한 후

var tableContents = ''; 
$.each(data, function(key,val){ 
    tableContents += key +' - '+ val; // generate whatever HTML you need 
}); 
$('.tableBody') 
    .empty() 
    .append(tableContents); 

Answer 4

DOM에 첨부되지 않은 테이블 요소를 생성하고 필요하면 채우고 생성이 완료되면 기존 테이블을 교체하거나 서버가이 테이블의 형식을 지정하도록 할 수 있습니다. 간단하게 테이블을 이미 형식이 지정된 Ajax 응답으로 바꾸십시오.