JQuery 및 라이브 테이블 업데이트

StackOverflow https://stackoverflow.com/questions/1812976

문제

내가 달성하려고 하지만 아직 해독할 수 없었던 테이블 조작과 관련된 몇 가지 사항에 대한 예제나 샘플 코드의 방향을 알려줄 수 있는 사람이 있는지 궁금합니다.

현재 다음을 사용하여 정렬되고 표시되는 데이터 테이블이 생성되고 있습니다. 테이블소터 Jquery용 플러그인입니다.

이러한 추가 기능을 추가하고 싶습니다.

  1. 페이지를 새로 고치지 않고 새 데이터로 몇 초마다 자동으로 테이블을 업데이트하고 정렬을 유지합니다.새 데이터에 대한 json을 출력하는 PHP 스크립트를 만들 수 있지만 어떻게든 표시된 마지막 행의 ID를 보내야 합니다(표시할 새 행을 찾을 수 있도록).
  2. 새 행이 추가되면(이상적으로는 페이드와 같은 부드러운 전환으로) "new"라는 CSS 클래스 또는 새로운 색상을 제공하는 무언가를 갖게 됩니다.
  3. 그러면 새 색상이 페이지에서 포커스를 유지한 후 15초 이내에 일반 테이블 스타일(클래스 제거)로 희미해집니다.
  4. 페이지에 포커스가 없고 새 데이터가 있는 경우(예:백그라운드에서 새로고침되지만 사용자는 다른 창/탭을 보고 있음) 사용자가 창/탭에 초점을 맞출 때까지 기다린 다음 3에 설명된 대로 일반 색상으로 페이드를 수행합니다.

이것이 분명했으면 좋겠습니다. 제가 가장 회의적인 부분은 초점 문제가 있는 4번 항목입니다. 하지만 페이스북은 라이브 뉴스 피드를 통해 그렇게 하는 것 같습니다.창에 초점이 맞춰질 때까지 업데이트되지 않는 것 같습니다(또는 그렇게 가정합니다).

도움과 안내를 주시면 대단히 감사하겠습니다!

내 테이블은 다음과 같은 형식입니다.

<table class="tablesorter" cellspacing="1"> 
    <thead> 
    <tr> 
        <th>ID</th> 
        <th>lid</th> 
        <th>Time</th> 
        <th>Season</th> 
        <th>Keyword</th> 
        <th>Campaign</th> 
        <th>IP</th>         
    </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td class="id">6875</td> 
            <td class="lid">-----</td> 
            <td class="time">28 Nov 09 16:35:24</td> 
            <td class="season">xxx xxx</td> 
            <td class="keyword">xx xx xxxx</td> 
            <td class="campaign">xxx</td> 
            <td class="ip">xx.xx.xx.xx</td> 
        </tr>
    <tbody> 
<table>
도움이 되었습니까?

해결책

1:JavaScript에서 몇 초마다 이벤트를 트리거하려면 다음을 사용하세요. setTimeout().사용 :last 필터를 사용하면 마지막 행을 가져오는 데 도움이 됩니다.마지막 행 내부의 숨겨진 입력 필드에 ID를 저장합니다.

2:마지막으로 시도한 결과 페이드 및 롤다운이 테이블 행에서 제대로 작동하지 않았습니다.나는 완전히 새로운 것을 만드는 것과 같이 이 기능이 작동하도록 하기 위해 정말 추악한 해킹을 만들어야 했습니다. <table> 행당.최신 버전의 jQuery에서는 상황이 개선되었을 수도 있습니다.확인해 보세요 효과 콘텐츠에 애니메이션을 적용할 수 있는 방법 목록을 확인하세요.

삼:페이드, 롤다운 및 기타 효과와 마찬가지로 콜백을 사용하여 이를 구현할 수 있습니다.

4:저는 창 포커스를 감지한 경험이 없지만 이 문제에 도움이 될 수 있는 리소스가 있는 것 같습니다.다음은 몇 가지입니다.http://www.webdeveloper.com/forum/archive/index.php/t-33457.html http://www.thefutureoftheweb.com/blog/Detect-browser-window-focus

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top