Tabela dinâmica com opções

Front-end
#1

Pessoal,

Tenho uma tabela dinâmica, onde atualizo ela a cada x tempo.

Mas, queria encontrar uma tabela com opções de mostrar apenas certos valores de uma coluna, ou certos campos.

Um filtro… atualmente o primeiro dado carrego na tela e os demais (a função de refresh) monto a tabela no JS:

<table id="tabelaAlerta" class="table" data-sort="false"
  data-page-size="999">
  <thead>
    <tr>
      <th>!</th>
      <th>Nível Atual</th>
      <th>Dispositivo</th>
      <th>Data</th>
      <th>Alerta 1</th>
      <th>Alerta 2</th>
      <th>Excluir</th>
      <th>Eventos</th>
    </tr>
  </thead>
  <tbody>
    <c:forEach var="listaAlertas" varStatus="alerta" items="${listaAlertas}">
      <tr id="cor1">
        <fmt:parseNumber var="nvlAlerta" integerOnly="true" type="number" value="${listaAlertas.codNvlAlertaMax}" />
        <c:if test="${nvlAlerta >= 3 && nvlAlerta <= 4}">
          <td>
            <img src="img/medio.png"    width="16" height="16" />
          </td>
        </c:if>
        <c:if test="${nvlAlerta >= 5}">
          <td>
            <img src="img/alto.gif"    width="16" height="16" />
          </td>
        </c:if>
        <td><c:out
            value='${listaAlertas.codNvlAlertaAtual != "" ? listaAlertas.codNvlAlertaAtual : "-"}' /></td>        
        
        <td><c:out value='${listaAlertas.dispositivo}' /></td>
        <td><c:out
            value='${listaAlertas.dataEnvio != "" ? listaAlertas.dataEnvio : "-"}' /></td>
        <td><c:out
            value='${listaAlertas.codAlerta1 != "" ? listaAlertas.codAlerta1 : "N"}' /></td>
        <td><c:out
            value='${listaAlertas.codAlerta2 != "" ? listaAlertas.codAlerta2 : "N"}' /></td>
        <td><a href="#"> <img
            alt="Excluir Alerta" src="img/delete.png" width="15"
            height="15"
            onclick="confirmarExcluirAlerta(${listaAlertas.codAlerta})">
        </a></td>
        <td><a href="#"> <img
            alt="Lista de Eventos" src="img/lista256.png" width="15"
            height="15"
            onclick="listaEventos('${listaAlertas.dispositivo}')">
        </a></td>
      </tr>
    </c:forEach>
  </tbody>
</table>

JS:

function atualiza() {
  $.ajax({
    type : "POST",
    url : "ServletAlertaRN"
  })
  .done(
    function(data) {
      var dados = "";
      $('#tabelaAlerta tbody').html("");
      
      //style='margin-left:40%'         
      var linkExclusao = "<a href=''#'>"
          + "<img alt='Excluir Alerta' src='img/delete.png' width='15' height='15' onclick='confirmarExcluirAlerta('";
      
      var linkEvento = "<a href=''#'>"
        + "<img alt='Lista de Eventos' src='img/lista256.png' width='15' height='15' onclick='listaEventos('";
      
      data.forEach(function(o) {
            dados+="<tr>";
            
            if (parseInt(o.codNvlAlertaMax) >= 3 && parseInt(o.codNvlAlertaMax) <= 4){
              dados+="<td><img src='img/medio.png' width='16' height='16' /></td>";
            } else if (parseInt(o.codNvlAlertaMax) >= 5){
              dados+="<td><img src='img/alto.gif' width='16' height='16' /></td>";
            } else {
              dados+="<td> - </td>";
            }
            
            dados+="<td>" + o.codNvlAlertaAtual + "</td>";

            dados+="<td>" + o.dispositivo + "</td>";
            
            dados+="<td>" + o.dataEnvio + "</td>";
            
            if(o.codAlerta1 == "" || o.codAlerta1 == null){
              dados+="<td> N </td>";
            } else {
              dados+="<td>" + o.codAlerta1 + "</td>";
            }

            if(o.codAlerta2 == "" || o.codAlerta2 == null){
              dados+="<td> N </td>";
            } else {
              dados+="<td>" + o.codAlerta2 + "</td>";
            }
              
            dados+="<td>" + linkExclusao + o.codAlerta+ "')'></a></td>";
            dados+="<td>" + linkEvento + o.dispositivo+ "')'></a></td>";
            dados+="</tr>";
          });
      $('#tabelaAlerta tbody').append(dados).trigger('footable_redraw');
    });
}
#2

Pacato.

Não consegui entender o que você esta querendo?

#3

Olá Marco… quero uma tabela com grid inteligente, mas que eu consiga implementar com dados que ficam sendo atualizados contantes.

Tipo, se eu adicionei que quero ver apenas um tipo de alerta, selecionei um filtro, mas quando atualizar depois de 3 segundos, esse filtro vai se manter? ou será “limpo”?

Então queri ver se tem alguma tabela inteligente assim, como aquelas grid.

#4

Da pra você fazer o ajax atualizar, em vez de dar um refresh na tela. aí o ajax faz o request com os filtros que você quer.

Outra forma de atualizar só os registros que são atualizados, isso em “tempo real” seria usar websockets.

#5

Não consegui criar esta solução em ajax…

#6

Cara… não sei se o datatables resolveria seu problema de atualização, mas com ele vc pode fazer um filtro por coluna…

https://www.datatables.net/examples/api/multi_filter.html

#7

Valeu Rodrigo, vou fazer uns testes e ver se resolve. Mas esse ajax me da dor de cabeça rs…

#8

Ainda busco uma solução, pois até as colunas queriam que fossem dinâmicas, caso o operador não quisesse ver tal coluna, ele selecionava qual ele quer ver

Não encontrei um exemplo desta datatables para java, jsp e servlet

#9

@Pacato, sou iniciante em web então não sei se entendi bem. Mas vou tentar dar uma idéia:

Se for apenas pra esconder uma coluna específica com um evento do usuário depois de carregar a tabela, inserir classes do tipo dinamicamente por JS não funciona? Segue:

.esconder-tds-2 tr td:nth-child(2) {
/* propriedade css pra esconder a celula, display: none por exemplo */
}

.esconder-tds-3 tr td:nth-child(3) {
/* propriedade css pra esconder a celula, display: none por exemplo */
}

E assim por diante …

Alterando o tbody por exemplo pra classes com base semelhante a essa, deve esconder todas celulas que forem as segundas das linhas (tr), terceira, etc, removendo a coluna completa. Não serve?

Não testei aqui, mas fica a idéia de qualquer forma. Abraço

#10

Obrigado Rafael, gostei da ideia, mas ainda não testei, não sei se ao carregar a tela (pq fica atualizando a cada 3s) ele perca a seleção e volte a mostrar tudo de novo.

Gostei desse dataTables, logo o exemplo da tela:

https://www.datatables.net/examples/api/multi_filter.html

Que o Rodrigo indicou, pois basta colocar o filtro no campo “search” da coluna que deseja que ele faz filtro automático.

Também não sei se ao carregar a tela acabaria sumindo o filtro, mas tenho outro problema que é de não saber implantar esse tabela :frowning: também não manjo muito rafael.

#11

Já tentou com AngularJS ?

Mais fácil você controla co ng-show, ng-hide ou ng-if.

#12

Não conheço rof… só ouvi falar nesse angularJS…

#13

Com angular você vai rapidinho fazer isso, é bem simples, segue um tutorial com angular bem claro do Rodrigo Branas:

O conteúdo já te deixa preparado para fazer o que você quer.