como manter o filtro selecionado após refresh da página
Boa tarde amigos,
Estou com uma dúvida e como sou novato, infelizmente após várias pesquisas não consegui uma solução:
Tenho uma página da web que contém alguns filtros de colunas (código html a seguir). O que gostaria parece simples mas não me veio nenhuma solução até o momento: Preciso manter esses filtros após o refresh da página. Vale observar que, ao fazer esse refresh, o código roda um programa, que faz uma consulta e retorna todos os dados novamente, ou seja, seria necessário guardar os valores do filtro atual em uma variável e recuperá-los novamente através de algum javascript ou variável, que posso inserir no meu programa também (ou algo assim).
Resumindo: Ao clicar em refresh, eu rodo um programa que traz os dados que preciso, atualizando a página. Quero que ele traga os dados mas mantenha os filtros que estão vigentes.
No código abaixo, não chamei o programa, apenas dei um refresh na página, como exemplo do que preciso e do que está acontecendo já serve. Ao colocar um filtro e clicar em refresh, ele não mantém o filtro, mostrando todos os dados novamente:
Se puderem ajudar ou dar uma luz fico muito agradecido;
Att
Fábio
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w
ww.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Conteudo</title>
<script type="text/javascript">
window.onload=function(){//para applid
var filtro = document.getElementById('filtro-applid');
var tabela = document.getElementById('lista');
filtro.onkeyup = function() {
var nomeFiltro = filtro.value.toUpperCase();
for (var i = 1; i < tabela.rows.length; i++) {
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
{
var conteudoCelula = tabela.rows.cells[0].textContent;
}
else
{
var conteudoCelula = tabela.rows.cells[0].innerText;
}
var corresponde = conteudoCelula.toUpperCase().indexOf(nomeFiltro) >= 0;
tabela.rows.style.display = corresponde ? '' : 'none';
}
};//para cec
var filtro1 = document.getElementById('filtro-cec');
var tabela1 = document.getElementById('lista');
filtro1.onkeyup = function() {
var nomeFiltro1 = filtro1.value.toUpperCase();
for (var i = 1; i < tabela1.rows.length; i++) {
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
{
var conteudoCelula = tabela.rows.cells[1].textContent;
}
else
{
var conteudoCelula = tabela.rows.cells[1].innerText;
}
var corresponde = conteudoCelula.toUpperCase().indexOf(nomeFiltro1) >= 0;
tabela1.rows.style.display = corresponde ? '' : 'none';
}
};//para smfid
var filtro2 = document.getElementById('filtro-smfid');
var tabela2 = document.getElementById('lista');
filtro2.onkeyup = function() {
var nomeFiltro = filtro2.value.toUpperCase();
for (var i = 1; i < tabela2.rows.length; i++) {
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
{
var conteudoCelula = tabela.rows.cells[2].textContent;
}
else
{
var conteudoCelula = tabela.rows.cells[2].innerText;
}
var corresponde = conteudoCelula.toUpperCase().indexOf(nomeFiltro) >= 0;
tabela2.rows.style.display = corresponde ? '' : 'none';
}
};//para procstep
var filtro3 = document.getElementById('filtro-procstep');
var tabela3 = document.getElementById('lista');
filtro3.onkeyup = function() {
var nomeFiltro = filtro3.value.toUpperCase();
for (var i = 1; i < tabela3.rows.length; i++) {
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
{
var conteudoCelula = tabela.rows.cells[3].textContent;
}
else
{
var conteudoCelula = tabela.rows.cells[3].innerText;
}
var corresponde = conteudoCelula.toUpperCase().indexOf(nomeFiltro) >= 0;
tabela3.rows.style.display = corresponde ? '' : 'none';
}
};//para status
var filtro4 = document.getElementById('filtro-status');
var tabela4 = document.getElementById('lista');
filtro4.onkeyup = function() {
var nomeFiltro = filtro4.value.toUpperCase();
for (var i = 1; i < tabela4.rows.length; i++) {
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
{
var conteudoCelula = tabela.rows.cells[4].textContent;
}
else
{
var conteudoCelula = tabela.rows.cells[4].innerText;
}
var corresponde = conteudoCelula.toUpperCase().indexOf(nomeFiltro) >= 0;
tabela4.rows.style.display = corresponde ? '' : 'none';
}
};//para descrição
var filtro5 = document.getElementById('filtro-descricao');
var tabela5 = document.getElementById('lista');
filtro5.onkeyup = function() {
var nomeFiltro = filtro5.value.toUpperCase();
for (var i = 1; i < tabela5.rows.length; i++) {
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
{
var conteudoCelula = tabela.rows.cells[5].textContent;
}
else
{
var conteudoCelula = tabela.rows.cells[5].innerText;
}
var corresponde = conteudoCelula.toUpperCase().indexOf(nomeFiltro) >= 0;
tabela5.rows.style.display = corresponde ? '' : 'none';
}
};//para stcstate
var filtro7 = document.getElementById('filtro-stcstate');
var tabela7 = document.getElementById('lista');
filtro7.onkeyup = function() {
var nomeFiltro = filtro7.value.toUpperCase();
for (var i = 1; i < tabela7.rows.length; i++) {
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
{
var conteudoCelula = tabela.rows.cells[6].textContent;
}
else
{
var conteudoCelula = tabela.rows.cells[6].innerText;
}
var corresponde = conteudoCelula.toUpperCase().indexOf(nomeFiltro) >= 0;
tabela7.rows.style.display = corresponde ? '' : 'none';
}
};
}
</script>
</head>
<body background="/dfhwbimg/background1.gif" style="margin:0px; padding: 0px">
<div style="width:100%; height: 5%; background-color:#000000; margin-top:0px; margin-bottom:20px; padding:0px">
<table width="100%">
<tr>
<td width="90%">
<h5 style="color:#ffffff; font-family:Arial; padding-top:5px; margin:0px; text-align:center">RELAÇÃO DE AORS DO PROCST ADM$WEB - Web transações administrativas </h5>
</td>
</table>
</div>
<table width="100%" CELLSPACING="3" CELLPADDING="3" BORDER="0" CLASS="sortable" ID="lista">
<tr width="100%">
<th style="width:05%"><div>APPLID</div><input id="filtro-applid" size="8" maxlength="8"/></th>
<th style="width:05%"><div>CEC</div><input id="filtro-cec" size="2" maxlength="2"/></th>
<th style="width:05%"><div>SMFID</div><input id="filtro-smfid" size="4" maxlength="4"/></th>
<th style="width:05%"><div>PROCSTEP</div><input id="filtro-procstep" size="8" maxlength="8"/></th>
<th style="width:05%"><div>STATUS</div><input id="filtro-status" size="8" maxlength="8"/></th>
<th style="width:05%"><div>DESCRIÇÃO</div><input id="filtro-descricao" size="50" maxlength="50"/></th>
<th style="width:05%"><div>STCSTATE</div><input id="filtro-stcstate" size="8" maxlength="8"/></th>
<th style="width:05%">REPORT</th>
<th style="width:05%">TRANS
<th style="width:08%">CPU QR</th>
<th style="width:05%">QRI(%)</th>
<th style="width:05%">QRR(%)</th>
<th style="width:05%">R-INT</th>
<th style="width:05%">R-ACU</th>
<th style="width:05%">TORS</th>
<th style="width:05%">MXTS</th>
<th style="width:08%">CPU L8</th>
<th style="width:05%">SRB Time</th>
<th style="width:08%">CPU ADS</th>
</tr>
<tr width="100%" bgcolor="#99CCFF">
<td align=center bgcolor="#EB1515"><a href="[http://172.17.71.53:04091/cics/MD99/MDPP6010/6010/PAOR/DAOR/?6966B8EE00000000000000002E4931260000000000000000000000002E44000C](http://172.17.71.53:4091/cics/MD99/MDPP6010/6010/PAOR/DAOR/?6966B8EE00000000000000002E4931260000000000000000000000002E44000C)">CIC3A2W </td>
<td align=center style="width:07%" bgcolor="#EB1515"> 04 | 8%</td>
<td align=center style="width:07%" bgcolor="#99CCFF">BSBO | 31%</td>
<td align=center> ADM$WEB </td>
<td align=center><a href="[http://172.17.71.53:04091/cics/MD99/MDPP6008/6008/PAOR/QUIE/?6966B8EE00000000000000002E4931260000000000000000000000002E44000C](http://172.17.71.53:4091/cics/MD99/MDPP6008/6008/PAOR/QUIE/?6966B8EE00000000000000002E4931260000000000000000000000002E44000C)" onclick=" return confirm('Deseja alterar o status do AOR?')">ACTIVE</td>
<td align=left>ADM$WEB - ADM. WEB </td>
<td align=center bgcolor="#99CCFF">Running </td>
<td align=center>18:49:30</td>
<td align=center bgcolor="#99CCFF"> 354</td>
<td align=center> 00:00,37993</td>
<td align=center bgcolor="#99CCFF"> 0</td>
<td align=center> 93</td>
<td align=center> 0</td>
<td align=center> 0</td>
<td align=center><a href="[http://172.17.71.53:04091/cics/MD99/MDPP6007/6007/PAOR/ATOR/?6966B8EE00000000000000002E4931260000000000000000000000002E44000C](http://172.17.71.53:4091/cics/MD99/MDPP6007/6007/PAOR/ATOR/?6966B8EE00000000000000002E4931260000000000000000000000002E44000C)"> 0</td>
<td align=center> 999</td>
<td align=center> 00:00,61597</td>
<td align=center bgcolor="#99CCFF">00:00,01159</td>
<td align=center>00:00,99620</td>
</tr>
<tr width="100%" bgcolor="#FFFFFF">
<td align=center bgcolor="#FFFFFF"><a href="[http://172.17.71.53:04091/cics/MD99/MDPP6010/6010/PAOR/DAOR/?6966B8EE00000000000000002E4935A00000000000000000000000002E44000C](http://172.17.71.53:4091/cics/MD99/MDPP6010/6010/PAOR/DAOR/?6966B8EE00000000000000002E4935A00000000000000000000000002E44000C)">CIC3A2X </td>
<td align=center style="width:07%" bgcolor="#FFFFFF"> 03 | 15%</td>
<td align=center style="width:07%" bgcolor="#FFFFFF">BSBD | 14%</td>
<td align=center> ADM$WEB </td>
<td align=center><a href="[http://172.17.71.53:04091/cics/MD99/MDPP6008/6008/PAOR/QUIE/?6966B8EE00000000000000002E4935A00000000000000000000000002E44000C](http://172.17.71.53:4091/cics/MD99/MDPP6008/6008/PAOR/QUIE/?6966B8EE00000000000000002E4935A00000000000000000000000002E44000C)" onclick=" return confirm('Deseja alterar o status do AOR?')">ACTIVE</td>
<td align=left>ADM$WEB - ADM. WEB </td>
<td align=center bgcolor="#FFFFFF">Running </td>
<td align=center>18:49:27</td>
<td align=center bgcolor="#FFFFFF"> 564</td>
<td align=center> 00:00,55272</td>
<td align=center bgcolor="#FFFFFF"> 0</td>
<td align=center> 94</td>
<td align=center> 0</td>
<td align=center> 0</td>
<td align=center><a href="[http://172.17.71.53:04091/cics/MD99/MDPP6007/6007/PAOR/ATOR/?6966B8EE00000000000000002E4935A00000000000000000000000002E44000C](http://172.17.71.53:4091/cics/MD99/MDPP6007/6007/PAOR/ATOR/?6966B8EE00000000000000002E4935A00000000000000000000000002E44000C)"> 0</td>
<td align=center> 999</td>
<td align=center> 00:00,96758</td>
<td align=center bgcolor="#FFFFFF">00:00,01431</td>
<td align=center>00:01,49954</td>
</tr>
<tr width="100%" bgcolor="#99CCFF">
<td align=center bgcolor="#99CCFF"><a href="[http://172.17.71.53:04091/cics/MD99/MDPP6010/6010/PAOR/DAOR/?6966B8EE00000000000000002E493A1A0000000000000000000000002E44000C](http://172.17.71.53:4091/cics/MD99/MDPP6010/6010/PAOR/DAOR/?6966B8EE00000000000000002E493A1A0000000000000000000000002E44000C)">CIC3A2Y </td>
<td align=center style="width:07%" bgcolor="#99CCFF"> 05 | 11%</td>
<td align=center style="width:07%" bgcolor="#99CCFF">BSBG | 27%</td>
<td align=center> ADM$WEB </td>
<td align=center><a href="[http://172.17.71.53:04091/cics/MD99/MDPP6008/6008/PAOR/QUIE/?6966B8EE00000000000000002E493A1A0000000000000000000000002E44000C](http://172.17.71.53:4091/cics/MD99/MDPP6008/6008/PAOR/QUIE/?6966B8EE00000000000000002E493A1A0000000000000000000000002E44000C)" onclick=" return confirm('Deseja alterar o status do AOR?')">ACTIVE</td>
<td align=left>ADM$WEB - ADM. WEB </td>
<td align=center bgcolor="#99CCFF">Running </td>
<td align=center>18:49:28</td>
<td align=center bgcolor="#99CCFF"> 356</td>
<td align=center> 00:00,43251</td>
<td align=center bgcolor="#99CCFF"> 0</td>
<td align=center> 96</td>
<td align=center> 0</td>
<td align=center> 0</td>
<td align=center><a href="[http://172.17.71.53:04091/cics/MD99/MDPP6007/6007/PAOR/ATOR/?6966B8EE00000000000000002E493A1A0000000000000000000000002E44000C](http://172.17.71.53:4091/cics/MD99/MDPP6007/6007/PAOR/ATOR/?6966B8EE00000000000000002E493A1A0000000000000000000000002E44000C)"> 0</td>
<td align=center> 999</td>
<td align=center> 00:00,63040</td>
<td align=center bgcolor="#99CCFF">00:00,01440</td>
<td align=center>00:01,06316</td>
</tr>
<tr width="100%" bgcolor="#FFFFFF">
<td align=center bgcolor="#E8EC10"><a href="[http://172.17.71.53:04091/cics/MD99/MDPP6010/6010/PAOR/DAOR/?6966B8EE00000000000000002E493E940000000000000000000000002E44000C](http://172.17.71.53:4091/cics/MD99/MDPP6010/6010/PAOR/DAOR/?6966B8EE00000000000000002E493E940000000000000000000000002E44000C)">CIC3A2Z </td>
<td align=center style="width:07%" bgcolor="#E8EC10"> 07 | 9%</td>
<td align=center style="width:07%" bgcolor="#FFFFFF">BSBH | 31%</td>
<td align=center> ADM$WEB </td>
<td align=center><a href="[http://172.17.71.53:04091/cics/MD99/MDPP6008/6008/PAOR/QUIE/?6966B8EE00000000000000002E493E940000000000000000000000002E44000C](http://172.17.71.53:4091/cics/MD99/MDPP6008/6008/PAOR/QUIE/?6966B8EE00000000000000002E493E940000000000000000000000002E44000C)" onclick=" return confirm('Deseja alterar o status do AOR?')">ACTIVE</td>
<td align=left>ADM$WEB - ADM. WEB </td>
<td align=center bgcolor="#FFFFFF">Running </td>
<td align=center>18:49:28</td>
<td align=center bgcolor="#FFFFFF"> 388</td>
<td align=center> 00:00,46110</td>
<td align=center bgcolor="#FFFFFF"> 0</td>
<td align=center> 90</td>
<td align=center> 0</td>
<td align=center> 0</td>
<td align=center><a href="[http://172.17.71.53:04091/cics/MD99/MDPP6007/6007/PAOR/ATOR/?6966B8EE00000000000000002E493E940000000000000000000000002E44000C](http://172.17.71.53:4091/cics/MD99/MDPP6007/6007/PAOR/ATOR/?6966B8EE00000000000000002E493E940000000000000000000000002E44000C)"> 0</td>
<td align=center> 999</td>
<td align=center> 00:00,75193</td>
<td align=center bgcolor="#FFFFFF">00:00,01645</td>
<td align=center>00:01,21451</td>
</tr>
</table>
<script>
zebra('lista', 'linhaaz');
</script>
</table>
<div style="width:100%">
<table ALIGN="CENTER" BORDER="0">
<tr>
<td colspan="4" align="center" style="padding-top:45px"><input type="button" value="Voltar" style="width: 100px; height:30px;
font-family:Verdana,Helvetica; font-weight:bold; color:white; background:#3366cc; border-radius:15px;cursor:hand" onClick="location.href = 'http://172.17.71.53:04091/cics/MD99/MDPP6013/6013/6013/PMEN/?6966B8EE00000000000000002E44000C0000000000000000000000002E44000C'"></td>
<td colspan="4" align="center" style="padding-top:45px"><input type="button" value="Refresh" style="width: 100px; height:30px;
font-family:Verdana,Helvetica; font-weight:bold; color:white; background:#3366cc; border-radius:15px;cursor:hand" onClick="window.location.reload()"></td>
</tr>
</table>Discussão (0)
Carregando comentários...