2

Eu tenho uma tabela conforme figura abaixo, preciso que ela atualize a cada 1s, mas não tenho ideia de como fazer.

Tabela

Utilizei uma tag do html 5, mas ele atualiza tudo, eu só quero atualizar somente a tabela. Minha View

<?php
$datenull = '01/01/0001 00:01';
$linha = 1;
?>
<meta HTTP-EQUIV="refresh" content="2">
<h1>Lista de Chamados em Abertos</h1>
<br/>
<div class="myTable table-responsive">
    <table class="table table-hover">
        <tr>
            <th></th>
            <th class="text-center">N. Chamado</th>
            <th class="text-center">Computador</th>
            <th class="text-center">Sala de Aula</th>
            <th class="text-center">Criado em</th>
        </tr>
        <?php foreach ($this->data as $entity) :?>
        <tr onclick="location.href ='<?php echo $this->url('Caos-admin-interna',
                array(
                    'controller' => 'calls',
                    'action' => 'examined',
                    'id' => $entity->getId()
                )
            );?>';" style="cursor: pointer">
            <td class="text-center"><strong><?php echo $linha;?></strong></td>
            <td class="text-center"><?php echo $entity->getId();?></td>
            <td class="text-center"><?php echo $entity->getComputer();?></td>
            <td class="text-center"><?php echo $entity->getClassroom();?></td>
            <td class="text-center"><?php echo $entity->getCreated();?></td>
        </tr>
        <?php
        $linha = $linha + 1;
        endforeach; ?>
    </table>
</div>
Meu Controller
<?php

namespace CaosAdmin\Controller;

use Zend\View\Model\ViewModel,
    Zend\Authentication\Storage\Session  as SessionStorage,
    Zend\Authentication\AuthenticationService;
use Zend\Paginator\Paginator,
    Zend\Paginator\Adapter\ArrayAdapter;


class CallsController extends CRUDController
{
    private $user;
    private $numberPerPage;
    public function __construct()
    {
        $this->entity = 'Caos\Entity\Call';
        $this->form = 'CaosAdmin\Form\Call';
        $this->service = 'Caos\Service\Call';
        $this->controller = 'calls';
        $this->route = 'Caos-admin';
        $auth = new AuthenticationService();
        $sessionStorage = new SessionStorage('CaosAdmin');
        $auth->setStorage($sessionStorage);
        $this->user = $sessionStorage->read();
        $this->numberPerPage = 20;
    }

    /**
     * @return ViewModel
     */
    public function indexAction()
    {
        $list = $this->getEm()->getRepository($this->entity)->findCallBySchool($this->user->getId());
        $viewModel = new ViewModel(array('data' => $list));
        return $viewModel;
    }
}

O retorno da minha pesquisa vem neste formato:

Array(
[0] => Caos\Entity\Call Object
    (
        [id:protected] => 27
        [examined:protected] => DateTime Object
            (
                [date] => 0001-01-01 00:00:00
                [timezone_type] => 3
                [timezone] => America/Sao_Paulo
            )

        [closed:protected] => DateTime Object
            (
                [date] => 0001-01-01 00:00:00
                [timezone_type] => 3
                [timezone] => America/Sao_Paulo
            )

        [modified:protected] => DateTime Object
            (
                [date] => 2017-01-20 16:21:39
                [timezone_type] => 3
                [timezone] => America/Sao_Paulo
            )

        [created:protected] => DateTime Object
            (
                [date] => 2017-01-20 16:21:39
                [timezone_type] => 3
                [timezone] => America/Sao_Paulo
            )

        [obs:protected] => 
        [computer:protected] => DoctrineORMModule\Proxy\__CG__\Caos\Entity\Computer Object
            (
                [__initializer__] => Closure Object
                    (
                        [static] => Array
                            (
                                [entityPersister] => Doctrine\ORM\Persisters\Entity\BasicEntityPersister Object
                                    (
                                        [class:protected] => Doctrine\ORM\Mapping\ClassMetadata Object
                                            (
                                                [name] => Caos\Entity\Computer
                                                [namespace] => Caos\Entity
                                                [rootEntityName] => Caos\Entity\Computer
                                                [customGeneratorDefinition] => 
                                                [customRepositoryClassName] => Caos\Entity\ComputerRepository
                                                [isMappedSuperclass] => 
                                                [isEmbeddedClass] => 
                                                [parentClasses] => Array
                                                    (
                                                    )

                                                [subClasses] => Array
                                                    (
                                                    )

                                                [embeddedClasses] => Array
                                                    (
                                                    )

                                                [namedQueries] => Array
                                                    (
                                                    )

                                                [namedNativeQueries] => Array
                                                    (
                                                    )

                                                [sqlResultSetMappings] => Array
                                                    (
                                                    )

leo_ap o retorno da minha pesquisa vem neste formato:

Array(
[0] => Caos\Entity\Call Object
    (
        [id:protected] => 27
        [examined:protected] => DateTime Object
            (
                [date] => 0001-01-01 00:00:00
                [timezone_type] => 3
                [timezone] => America/Sao_Paulo
            )

        [closed:protected] => DateTime Object
            (
                [date] => 0001-01-01 00:00:00
                [timezone_type] => 3
                [timezone] => America/Sao_Paulo
            )

        [modified:protected] => DateTime Object
            (
                [date] => 2017-01-20 16:21:39
                [timezone_type] => 3
                [timezone] => America/Sao_Paulo
            )

        [created:protected] => DateTime Object
            (
                [date] => 2017-01-20 16:21:39
                [timezone_type] => 3
                [timezone] => America/Sao_Paulo
            )

        [obs:protected] => 
        [computer:protected] => DoctrineORMModule\Proxy\__CG__\Caos\Entity\Computer Object
            (
                [__initializer__] => Closure Object
                    (
                        [static] => Array
                            (
                                [entityPersister] => Doctrine\ORM\Persisters\Entity\BasicEntityPersister Object
                                    (
                                        [class:protected] => Doctrine\ORM\Mapping\ClassMetadata Object
                                            (
                                                [name] => Caos\Entity\Computer
                                                [namespace] => Caos\Entity
                                                [rootEntityName] => Caos\Entity\Computer
                                                [customGeneratorDefinition] => 
                                                [customRepositoryClassName] => Caos\Entity\ComputerRepository
                                                [isMappedSuperclass] => 
                                                [isEmbeddedClass] => 
                                                [parentClasses] => Array
                                                    (
                                                    )

                                                [subClasses] => Array
                                                    (
                                                    )

                                                [embeddedClasses] => Array
                                                    (
                                                    )

                                                [namedQueries] => Array
                                                    (
                                                    )

                                                [namedNativeQueries] => Array
                                                    (
                                                    )

                                                [sqlResultSetMappings] => Array
                                                    (
                                                    )

Na minha View eu coloco esse código para imprimir os dados:

$entity->getId()

No javascript como que faço? eu tenho um método na minha entidade que transforma um array, como faço para usar.

Obrigado

1 Resposta 1

0

Você vai precisar de uma função Javascript para popular sua tabela dinamicamente. Essa função deve fazer uma requisição dinâmica (ajax) ao seu servidor para obter os dados a serem inseridos na tabela. Com essa função pronta, basta criar um setInterval que vai fazer ela ser executada a cada segundo.

1º) Rota e Controlador para retorno de dados JSON

Em seu arquivo de rotas, defina uma rota para chegar a um controlador que deverá possuir uma action exclusiva para retorno de dados JSON. Por exemplo:

'chamados-get' => array(
    'type'    => 'literal',
    'options' => array(
        'route'    => '/chamado/get',
        'defaults' => array(
            'controller' => 'Application\Controller\ChamadoController',
            'action'     => 'get',
        ),
    ),
),

O código acima deve ser inserido como um item do seu array de rotas, na configuração de seu módulo (arquivo module.config.php). Basicamente ela aponta para a url /chamado/get, chamando um controller Chamado e uma action get. Nomes criados apenas como exemplo, você deve substituir pelos reais nomes que você usa em sua aplicação.

Agora, o código do controlador deve possuir essa nossa action get e ela deve fazer: uma consulta ao seu banco de dados, obter os dados que você deseja exibir na tabela e retorna-los em formato JSON:

<?php

namespace Application\Controller;

use Zend\Mvc\Controller\AbstractActionController;

class ChamadoController extends AbstractActionController
{
    public function getAction() {
        // Aqui voce deve fazer uma consulta ao seu banco de dados para retornar os dados em um array
        // Usei um array pronto como exemplo
        $data[0]['numchamado'] = '1123';
        $data[0]['computador'] = 'inf01';
        $data[0]['sala'] = 'S301';
        $data[0]['criadoem'] = '2017-01-18';

        $data[1]['numchamado'] = '1235';
        $data[1]['computador'] = 'inf03';
        $data[1]['sala'] = 'S302';
        $data[1]['criadoem'] = '2017-01-19';

        $data[2]['numchamado'] = '1443';
        $data[2]['computador'] = 'inf02';
        $data[2]['sala'] = 'S301';
        $data[2]['criadoem'] = '2017-01-20';

        $this->response->setContent(json_encode($data));
        return $this->response;
    }
}

Note que essa action não retorna uma view. Ao atribuirmos um valor para $this->response->setContent e depois retornando o $this->response, estamos criando um tipo de retorno prematuro, que faz com que o Zend não procure a view da action e apenas retorne o conteúdo definido para o response. Para maiores informações sobre isso acesse: https://framework.zend.com/manual/2.2/en/modules/zend.mvc.examples.html#returning-early

Com isso, qualquer requisição para seu-dominio/chamado/get irá retornar os dados de seu banco em formato JSON.

2º) Javascript para Popular a Tabela

Agora o que precisamos fazer é criar a função javascript que popule sua tabela dinamicamente usando os dados JSON vindos da action que preparamos no passo anterior. Vamos usar jQuery para facilitar nossa vida:

<div class="myTable table-responsive">
    <table id="tbl-chamados" class="table table-hover">
        <thead>
        <tr>
            <th></th>
            <th class="text-center">N. Chamado</th>
            <th class="text-center">Computador</th>
            <th class="text-center">Sala de Aula</th>
            <th class="text-center">Criado em</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<script>
    function populateTable(){
        $.ajax({
            url: "<?php echo $this->url('chamados-get'); ?>",
            success: function(data){
                // Limpar tabela
                $('#tbl-chamados tbody').html("");

                // Popular a tabela com os dados vindos da requisição dinamica
                var dataJson = JSON.parse(data);
                var linha = 1;
                $.each(dataJson, function(){
                    $('<tr>').append(
                        $('<td>').text(linha++),
                        $('<td>').text(this['num_chamado']),
                        $('<td>').text(this['computador']),
                        $('<td>').text(this['sala']),
                        $('<td>').text(this['criadoem'])
                    ).appendTo('#tbl-chamados tbody');
                });
            }
        });
    }

    $(function(){
        setInterval(populateTable, 1000);
    });
</script>

o HTML da table fica então apenas com o thead preenchido, deixamos o tbody vazio pois quem vai inserir os tr dentro dele será o Javascript. O Javascript então vem logo abaixo, dentro da tag script. Ele é composto uma função chamada populateTable() e por uma chamada $(function(){..}) que é um atalho para o $(document).ready(...).

A função populateTable() faz o trabalho de fazer uma requisição dinâmica para a url da rota chamados-get e trazer seu retorno. Esse retorno é uma string JSON, que deve ser convertida em objeto JSON e depois itinerada. Nessa iteração ela vai criando as tr da tabela, com as colunas e seus valores e depois joga a tr para dentro do tbody da tabela.

A chamada de $(function(){..}) apenas define um setInterval para chamar a função de popular a tabela a cada segundo (1000ms).

Basicamente é isso. Claro que podem ter muitas melhorias nesse processo, mas a principio já da para você começar.

2
  • Por que não fazer a action retornar uma view preenchida e então só escrever o HTML desta view no retorno do ajax ? tirando assim o foreach do jquery $('#tbl-chamados tbody').html("") facilitando a manutenção. tirando a parte que Commented 23/01/2017 às 13:12
  • @MarcoViniciusSoaresDalalba Eu prefiro retornar apenas dados com o ajax, para trata-los na própria view. Isso favorece a interoperabilidade e flexibilidade. Não vejo como sua sugestão pode facilitar a manutenção, visto que se não for o foreach do jquery, criando as tr, seria o foreach do php. Na minha opinião, construir elementos html com javascript é mais indicado do que com php. Dessa forma, pode-se dizer que a manutenção está bem assegurado pela minha abordagem.
    – leoap
    Commented 23/01/2017 às 13:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .