Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

neotheone

Plugin Table Sorter + jquery + append

Por , em Javascript

Recommended Posts

neotheone    0

neotheone
Postado

Estou inserindo linhas em uma tabela com o jquery, estou usando

o $("#tblEquipamentosAfetados").append("<tr id="+txtContadorEquipamentos+">"+

 

porem acontece o seguinte: eu aperto para inserir o equipamento, ele pagina certinho, mas qnd continuo inserindo outras linhas na tabela, o table sorter parece se perder, ele some com as linhas que eu adicionei, ou simplesmente nao adiciona, alguem ja teve um problema parecido?

 

					<table id="tblEquipamentosAfetados" class="tablesorter" width="100%" border="1" cellspacing="2" cellpadding="0">
					<thead>
						<tr>
							<th>Estado Afetado</th>
							<th>Localidade Afetada</th>
							<th>Estação Afetada</th>
							<th>Fabricante</th>
							<th>Modelo</th>
							<th>ID_EQP_SHELF</th>
							<th>ID_CIRCUITO</th>
							<th>TIPO_CIRC</th>
							<th>LARGURA_DE_BANDA</th>
							<th>NOME</th>
							<th>TEL_VINCULADO</th>					
						</tr>
					</thead>
																							
					</table>


		$('#btnIncluirEquipamento').click(function() {
			
		
			var slcEstadosAfetados;
			var slcLocalidadesAfetadas;
			var slcEstacoesAfetadas;
			var slcEquipamentosAfetados;
			var txtFabricante;
			var txtModelo;
			var txtIdEqpShelf;
			var txtIdCircuito;
			var txtTipoCirc;
			var txtLarguraBanda;
			var txtNome;
			var txtTelVinculado;
			var equipamentos;
			var txtContadorEquipamentos;
			var arrayEquipamentos;
				
			slcEstadosAfetados		= $('#slcEstadosAfetados').val();
			slcLocalidadesAfetadas	= $('#slcLocalidadesAfetadas').val();
			slcEstacoesAfetadas		= $('#slcEstacoesAfetadas').val();
			slcEquipamentosAfetados	= $('#slcEquipamentosAfetados').val();
			txtContadorEquipamentos	= $('#txtContadorEquipamentos').val();
		
			
			$("#slcUFA").append("<option value=1>"+$("#slcEstadosAfetados option:selected").text()+"</option>");
			$("#slcUFB").append("<option value=1>"+$("#slcEstadosAfetados option:selected").text()+"</option>");
			
			if(txtContadorEquipamentos == 0){
				arrayEquipamentos = new Array();
				$("#tblEquipamentosAfetados").append('<tbody>');

			}
			
		
			for (i=0; i<slcEquipamentosAfetados.length; i++){
				
				equipamentos = slcEquipamentosAfetados[i].split("|");

				txtFabricante	= equipamentos[0];
				txtModelo		= equipamentos[1];
				txtIdEqpShelf	= equipamentos[2];
				txtIdCircuito	= equipamentos[3];
				txtTipoCircuito	= equipamentos[4];
				txtLarguraBanda	= equipamentos[5];
				txtNome			= equipamentos[6];
				txtTelVinculado = equipamentos[7];
				
				
				$("#tblEquipamentosAfetados").append("<tr id="+txtContadorEquipamentos+">"+
													   "<td><input type=hidden name=slcEstadosAfetados_"+txtContadorEquipamentos+" value="+slcEstadosAfetados+">"+$("#slcEstadosAfetados option:selected").text()+"</td>"+
													   "<td><input type=hidden name=slcLocalidadesAfetadas_"+txtContadorEquipamentos+" value="+slcLocalidadesAfetadas+">"+$("#slcLocalidadesAfetadas option:selected").text()+"</td>"+
													   "<td><input type=hidden name=slcEstacoesAfetadas_"+txtContadorEquipamentos+" value='"+slcEstacoesAfetadas+"'>"+slcEstacoesAfetadas+"</td>"+
													   "<td><input type=hidden name=txtFabricante_"+txtContadorEquipamentos+" value='"+txtFabricante+"'>"+txtFabricante+"</td>"+
													   "<td><input type=hidden name=txtModelo_"+txtContadorEquipamentos+" value='"+txtModelo+"'>"+txtModelo+"</td>"+
													   "<td><input type=hidden name=txtIdEqpShelf_"+txtContadorEquipamentos+" value='"+txtIdEqpShelf+"'>"+txtIdEqpShelf+"</td>"+
													   "<td><input type=hidden name=txtIdCircuito_"+txtContadorEquipamentos+" value='"+txtIdCircuito+"'>"+txtIdCircuito+"</td>"+
													   "<td><input type=hidden name=txtTipoCircuito_"+txtContadorEquipamentos+" value='"+txtTipoCircuito+"'>"+txtTipoCircuito+"</td>"+
													   "<td><input type=hidden name=txtLarguraBanda_"+txtContadorEquipamentos+" value='"+txtLarguraBanda+"'>"+txtLarguraBanda+"</td>"+
													   "<td><input type=hidden name=txtNome_"+txtContadorEquipamentos+" value='"+txtNome+"'>"+txtNome+"</td>"+
													   "<td><input type=hidden name=txtTelVinculado_"+txtContadorEquipamentos+" value="+txtTelVinculado+">"+txtTelVinculado+"</td>"+
													   "<td><input type='button' onclick=remove("+txtContadorEquipamentos+") value=remover></td>"+
													"</tr>");
													
				txtContadorEquipamentos++;
				

				$("#tblEquipamentosAfetados").tablesorterPager({container: $("#pager")});
			}
				
			if(txtContadorEquipamentos == 0){
				$("#tblEquipamentosAfetados").append('</tbody>');
		
			}
				$('#txtContadorEquipamentos').val(txtContadorEquipamentos);

				$('#tblEquipamentosAfetados').tablesorter({widgets: ['zebra']});
				$("#tblEquipamentosAfetados").tablesorter({sortList:[], widgets: ['zebra']});
				
					
				

		});

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não.. já usei o tablesorter, e ainda não tive esse tipo de problemas com ele.

Se não me engano, você precisa ter um <tbody> para ele funcionar ne?!...

 

Tenta postar um minimo de HTML e JS necessários, ou um link para podermos testar o script, vermos o erro ocorrendo, e tentar sugerir algo.

Já que é mais complexo que o rotineiro.. e bem específico.

 

 

Conhece o Firebug? extensão do Firefox?

veja se o append

$("#tblEquipamentosAfetados").append("<tr id="+txtContadorEquipamentos+">"+
está entrando no lugar que você queria mesmo da tabela. Mas considere colocar um <tbody> nela.

Compartilhar este post

Link para o post
Compartilhar em outros sites

neotheone    0

neotheone
Postado

Eu tenho minha página html e o meu javascript (jquery), como posso adicionar linhas na tabela e ela ser paginada

pelo table sorter(plugin do jquery:

 

 

$(document).ready(function() {
<link rel="stylesheet" href="/biblioteca/jquery/grid/TableSorter/css/jq.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="/biblioteca/jquery/grid/TableSorter/css/style.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="/biblioteca/jquery/grid/TableSorter/css/table.css" type="text/css" media="print, projection, screen" />

<script type="text/javascript" src="/biblioteca/jquery/jquery-1.3.2/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/biblioteca/jquery/grid/TableSorter/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="/biblioteca/jquery/grid/TableSorter/js/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="/biblioteca/jquery/grid/TableSorter/js/chili-1.8b.js"></script>
<script type="text/javascript" src="/biblioteca/jquery/grid/TableSorter/js/docs.js"></script>
		$('#btnIncluirEquipamento').click(function() {
			
		
			var slcEstadosAfetados;
			var slcLocalidadesAfetadas;
			var slcEstacoesAfetadas;
			var slcEquipamentosAfetados;
			var txtFabricante;
			var txtModelo;
			var txtIdEqpShelf;
			var txtIdCircuito;
			var txtTipoCirc;
			var txtLarguraBanda;
			var txtNome;
			var txtTelVinculado;
			var equipamentos;
			var txtContadorEquipamentos;
			var arrayEquipamentos;
				
			slcEstadosAfetados		= $('#slcEstadosAfetados').val();
			slcLocalidadesAfetadas	= $('#slcLocalidadesAfetadas').val();
			slcEstacoesAfetadas		= $('#slcEstacoesAfetadas').val();
			slcEquipamentosAfetados	= $('#slcEquipamentosAfetados').val();
			txtContadorEquipamentos	= $('#txtContadorEquipamentos').val();
					
			
			for (i=0; i<slcEquipamentosAfetados.length; i++){
				
				equipamentos = slcEquipamentosAfetados[i].split("|");

				txtFabricante	= equipamentos[0];
				txtModelo		= equipamentos[1];
				txtIdEqpShelf	= equipamentos[2];
				txtIdCircuito	= equipamentos[3];
				txtTipoCircuito	= equipamentos[4];
				txtLarguraBanda	= equipamentos[5];
				txtNome			= equipamentos[6];
				txtTelVinculado = equipamentos[7];
				
				
			
			
				$("#tblEquipamentosAfetados").append("<tr id="+txtContadorEquipamentos+">"+
													   "<td><input type=hidden name=slcEstadosAfetados_"+txtContadorEquipamentos+" value="+slcEstadosAfetados+">"+$("#slcEstadosAfetados option:selected").text()+"</td>"+
													   "<td><input type=hidden name=slcLocalidadesAfetadas_"+txtContadorEquipamentos+" value="+slcLocalidadesAfetadas+">"+$("#slcLocalidadesAfetadas option:selected").text()+"</td>"+
													   "<td><input type=hidden name=slcEstacoesAfetadas_"+txtContadorEquipamentos+" value='"+slcEstacoesAfetadas+"'>"+slcEstacoesAfetadas+"</td>"+
													   "<td><input type=hidden name=txtFabricante_"+txtContadorEquipamentos+" value='"+txtFabricante+"'>"+txtFabricante+"</td>"+
													   "<td><input type=hidden name=txtModelo_"+txtContadorEquipamentos+" value='"+txtModelo+"'>"+txtModelo+"</td>"+
													   "<td><input type=hidden name=txtIdEqpShelf_"+txtContadorEquipamentos+" value='"+txtIdEqpShelf+"'>"+txtIdEqpShelf+"</td>"+
													   "<td><input type=hidden name=txtIdCircuito_"+txtContadorEquipamentos+" value='"+txtIdCircuito+"'>"+txtIdCircuito+"</td>"+
													   "<td><input type=hidden name=txtTipoCircuito_"+txtContadorEquipamentos+" value='"+txtTipoCircuito+"'>"+txtTipoCircuito+"</td>"+
													   "<td><input type=hidden name=txtLarguraBanda_"+txtContadorEquipamentos+" value='"+txtLarguraBanda+"'>"+txtLarguraBanda+"</td>"+
													   "<td><input type=hidden name=txtNome_"+txtContadorEquipamentos+" value='"+txtNome+"'>"+txtNome+"</td>"+
													   "<td><input type=hidden name=txtTelVinculado_"+txtContadorEquipamentos+" value="+txtTelVinculado+">"+txtTelVinculado+"</td>"+
													   "<td><input type='button' onclick=remove("+txtContadorEquipamentos+") value=remover></td>"+
													"</tr>");
													
				txtContadorEquipamentos++;
				

				
			}
				
			
				$('#txtContadorEquipamentos').val(txtContadorEquipamentos);
				
				$("#tblEquipamentosAfetados").tablesorter({sortList:[], widgets: ['zebra']});
				$("#tblEquipamentosAfetados").tablesorterPager({container: $("#pager")});
		});

})
					<table id="tblEquipamentosAfetados" width="100%" border="1" cellspacing="2" cellpadding="0">
					<thead>
						<tr>
							<th>Estado Afetado</th>
							<th>Localidade Afetada</th>
							<th>Estação Afetada</th>
							<th>Fabricante</th>
							<th>Modelo</th>
							<th>ID_EQP_SHELF</th>
							<th>ID_CIRCUITO</th>
							<th>TIPO_CIRC</th>
							<th>LARGURA_DE_BANDA</th>
							<th>NOME</th>
							<th>TEL_VINCULADO</th>					
						</tr>
					</thead>
					
					
																							
					</table>
					
					
					<div id="pager">
<form>
<img src="/biblioteca/jquery/grid/TableSorter/img/first.png"" class="first"/>
<img src="/biblioteca/jquery/grid/TableSorter/img/prev.png" class="prev"/>
<input readonly type="text" class="pagedisplay"/>
<img src="/biblioteca/jquery/grid/TableSorter/img/next.png"" class="next"/>
<img src="/biblioteca/jquery/grid/TableSorter/img/last.png"" class="last"/>
<select class="pagesize">
<option selected="selected" value="5">5</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito