Esses dias tive que alterar um sistema para mostrar mais dados numa tabela.
Como já sabem, não podemos trazer uma tabela inteira para a tela a não ser que ela seja pequena. Com tabelas acima de 30, 50 registros a história muda e precisamos segmentar a puxada.
Com YeAPF isso é bem fácil de fazer bastando apenas fazer várias chamadas seguidas incrementando xq_start a cada chamada. Estamos preparando ainda o yinterface.js que permitirá fazer isso tudo sem se preocupar (puxada completa, paginação, formulários dinâmicos, etc) se bem que -ao meu ver- é uma prática desaconselhável.
Mas voltando ao problema, eu fiz a mudança solicitada e coloquei 300 registros por página divididos em puxadas de 50 registros. Isso permite ao usuário revisar linha por linha a planilha (de um total de mais de 1000 páginas) em blocos administráveis durante o dia.
Só que isso me deixou com um problema, eu precisava indicar a carga e não tinha criado um waitIcon para entreter o usuário enquanto os dados viajam pelo cyberespaço.
Fazer um waitIcon com YeAPF é bem fácil e relato isso neste post. Porém, o problema é que piscava entre as requisições y eso – sinceramente- me molesta.
Então a solução foi a seguinte:1) No html criei um waitIcon no inicio do body
<body>
<div id='waitIcon'>
<img src="img/carregando.gif" height="64px">
</div>
...
</body>
Depois alterei o CSS para deixar ele fixo e permitir transições suaves
#waitIcon {
position: fixed;
right: 8px;
top: 135px;
z-index: 1000;
display: none;
transition: all 0.5s linear;
}
Pronto… sem graça e simples