Обновления JQuery и Live Table - PullRequest
Новая
       14

Обновления JQuery и Live Table

0 голосов
/ 28 ноября 2009

Мне было интересно, может ли кто-нибудь указать мне в направлении примеров или примеров кода несколько вещей, касающихся манипулирования таблицами, которых я пытаюсь достичь, но пока не смог взломать.

В настоящее время у меня есть производимая таблица данных, которая сортируется и отображается с использованием плагина Tablesorter для Jquery.

Я хотел бы добавить эти дополнительные функции

  1. Обновляйте таблицу автоматически каждые несколько секунд, добавляя новые данные (без обновления страницы), и продолжайте сортировку. Я могу создать скрипт PHP для вывода json для новых данных, но каким-то образом мне нужно будет отправить ему идентификатор последней отображаемой строки (чтобы я мог выяснить, какие новые строки отображать)
  2. После добавления новой строки (в идеале с плавным переходом, например, затухания) у нее будет класс css "new" или что-то, что придаст ей новый цвет
  3. Новый цвет затем исчезнет до обычного стиля таблицы (удалить класс) в течение 15 секунд после сохранения фокуса страницы
  4. если страница не имеет фокуса и там есть новые данные (т. Е. Происходит обновление в фоновом режиме, но пользователь смотрит на другое окно / вкладку), она ждет, пока пользователь не сфокусируется на окне / вкладке, а затем выполняет переход к нормальный цвет, как описано в 3.

Я надеюсь, что это было ясно, часть, которую я немного скептически отношусь к большей части, это пункт 4 с проблемой фокуса, но я думаю, что Facebook, кажется, делает это с их новостной лентой Live. Кажется, он не обновляется, пока у меня нет окна в фокусе (или я так полагаю)

Любая помощь и руководство будут с благодарностью!

Моя таблица в такой форме: 

<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 Ответ

2 голосов
/ 28 ноября 2009

1: чтобы вызывать событие каждые несколько секунд в JavaScript, используйте setTimeout(). Используйте фильтр :last, чтобы помочь вам захватить последний ряд. Сохраните идентификатор в скрытом поле ввода внутри последней строки.

2: в последний раз, когда я пытался, замирания и свертки не работали хорошо в строках таблицы Мне пришлось создавать действительно уродливые хаки, чтобы заставить эту функциональность работать, например, создавать совершенно новые <table> на строку. Может быть, что-то улучшилось в последних версиях jQuery? Проверьте Effects для списка способов, которыми вы можете анимировать свой контент.

3: Вы можете реализовать это с помощью обратных вызовов, как с затуханиями, свертками и другими эффектами.

4: У меня нет опыта определения фокуса окна, хотя кажется, что есть ресурсы, которые могут помочь вам в этом. Вот пара: http://www.webdeveloper.com/forum/archive/index.php/t-33457.html http://www.thefutureoftheweb.com/blog/detect-browser-window-focus

...