nepster-web
@nepster-web

Как перерисовать таблицу JavaScript?

Есть таблица игроков, с помощью SSE мы проверяем изменения на сервере.

В качестве ответа от сервера идет массив в json вида:

l['date']  = '5 минут назад';
       ['users'] =  array(
                                    'user' => 'avatar',
                                    'sort' => 0,
                                    'root' => 1,
                                  );


В users массив пользователей, которые присоединились к заявке (в данном случае 1, его позиция sort 0, тоесть он стоит на первом месте).

Выглядит это дело так:
-88693455.jpg

Теперь к примеру пользователь поменял себе sort на 1 и должен быть уже на 2 месте или к примеру присоединился еще 1 пользователь. Нужно это дело как-то отрисовать.

Если брать простую таблицу и простой пример на js, то вроде без проблем решается, однако, у меня немного сложнее:

<div class="wrapper" style="margin-top: 25px; margin-bottom: 25px;">
                    <table class="table" style="width: 70%;" id="proposal">
                        <thead>
                            <tr>
                                <th>№</th>
                                <th>Игрок</th>
                                <th>Опции</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                                $count = GameOperations::load()->countUsersInList($proposal->rules);
                            
                                $i = 0; // счетчик для сортировки 
                                $n = 0; // счетчик для пользователей 
                                while($i < $count)
                                {
                                    $waiting_id = (isset($waiting[$n]->user_id) && $waiting[$n]->user_id) ? $waiting[$n]->user_id : 0;
                                    
                                    echo '<tr id="waiting_'.$waiting_id.'" data-sort="'.$i.'">'."\n";
                                        echo '<td class="aligncenter" style="width:25px">'.($i+1).'</td>'."\n";
                                        
                                        $user  = 'Ожидание соперника';
                                        $param = '&nbsp;';
                                        if(isset($waiting[$n]->user_id) && $waiting[$n]->user_id)
                                        {
                                            if($waiting[$n]->sort == $i)
                                            {
                                                $user = GameShowData::load()->getUserString($game->game_id, $waiting[$n]->user_id); 
                                                
                                                if($proposal->user_id == Yii::app()->user->id)
                                                {
                                                    $param .= "\n".'<button title="Переместить вверх" class="gameIconUp GetRequestToServer" data-url="/play/control/?action=change&amp;proposal_id='.$proposal->proposal_id.'&amp;change=up&amp;user_id='.$waiting[$n]->user_id.'" >&nbsp;</button>'."\n";
                                                    $param .= "\n".'<button title="Переместить вниз" class="gameIconDown GetRequestToServer" data-url="/play/control/?action=change&amp;proposal_id='.$proposal->proposal_id.'&amp;change=down&amp;user_id='.$waiting[$n]->user_id.'" >&nbsp;</button>'."\n";
                                                    $param .= "\n".'<button title="Выгнать" class="gameIconClose GetRequestToServer" data-url="/play/control/?action=kick&amp;proposal_id='.$proposal->proposal_id.'&amp;user_id='.$waiting[$n]->user_id.'">&nbsp;</button>'."\n";
                                                }
                                                else
                                                {
                                                    $param = 'Нет опций'."\n";
                                                }
                                                
                                                $n++; 
                                            }
                                        }
                                        
                                        echo '<td id="user_'.$i.'">'.$user.'<div class="clear"></div></td>'."\n";
                                        echo '<td style="width:150px;">'.$param.'</td>'."\n";
                                        
                                    echo '</tr>'."\n";
                                                                     
                                    $i++;
                                }
                            ?>
                        </tbody>
                    </table>
                </div>


Это все дело генерирует нашу таблицу.

Сложности возникают с идеей как можно все это дело перерисовывать после ответа с сервера. Подскажите пожалуйста варианты?
  • Вопрос задан
  • 3655 просмотров
Пригласить эксперта
Ответы на вопрос 3
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Ответ написан
Комментировать
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы