Ir para conteúdo

Arquivado

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

marcelocardoso

paginação com JQUERY

Recommended Posts

Galera!!!

Adaptei um script da internet, mudei algumas coisas, e preciso, acrescentar os dados não digitados, mas sim, dinamicamente com uso de AJAX ou até mesmo fazer um DO WHILE com o proprio JQUERY. Busquei na internet, nada encontrada que me favorecesse.

Então, segue código: COMPLETO FUNCIONANDO...
 

<!DOCTYPE html>
<html>
<!-- #include file="inc/conexao.asp" -->

<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="robots" content="noindex, nofollow">
	<meta name="googlebot" content="noindex, nofollow">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
	<style type="text/css">
		table {
			border-spacing: 0px;
			border-collapse: separate;
			width: 100%;
			border-bottom: 1px solid #aaa;
			text-align: center;
		}
		
		thead td {
			margin: 0;
			padding: 0;
			padding: 2px;
		}
		
		thead th {
			margin: 0;
			padding: 5px;
			border-bottom: 1px solid #aaa;
		}
		
		div {
			padding-top: 10px;
			text-align: center;
		}
	</style>
	<script type='text/javascript'>
		var dados = [
          ['Banana', '10,00']
        , ['Maça', '2,00']
        , ['Pera', '6,00']
        , ['Goiaba', '3,25']
        , ['Tamarindo', '1,50']
        , ['Cenoura', '0,75']
        , ['Alface', '0,99']
        , ['Tomate', '3,21']
        , ['Abacaxi', 'N/D']
        , ['Kiwi', '99,50']
        , ['Cebola', '1,15']
        , ['Alho', '1,02']
        , ['Abóbora', '4,75']
        , ['Pêssego', '2,33']
        , ['laranja', '2,99']
    ];
		var tamanhoPagina = 6;
		var pagina = 0;

		function paginar() {
			$('table > tbody > tr').remove();
			var tbody = $('table > tbody');
			for (var i = pagina * tamanhoPagina; i < dados.length && i < (pagina + 1) * tamanhoPagina; i++) {
				tbody.append($('<tr>').append($('<td class="text-left">').append(dados[i][0])).append($('<td>').append(dados[i][1])))
			}
			$('#numeracao').text('Página ' + (pagina + 1) + ' de ' + Math.ceil(dados.length / tamanhoPagina));
		}

		function ajustarBotoes() {
			$('#proximo').prop('disabled', dados.length <= tamanhoPagina || pagina >= Math.ceil(dados.length / tamanhoPagina) - 1);
			$('#anterior').prop('disabled', dados.length <= tamanhoPagina || pagina == 0);
		}
		$(function () {
			$('#proximo').click(function () {
				if (pagina < dados.length / tamanhoPagina - 1) {
					pagina++;
					paginar();
					ajustarBotoes();
				}
			});
			$('#anterior').click(function () {
				if (pagina > 0) {
					pagina--;
					paginar();
					ajustarBotoes();
				}
			});
			paginar();
			ajustarBotoes();
		});
	</script>
</head>
<body>
	
	
	
	
	<table class="table table-bordered table-responsive table-hover">
		<thead>
			<tr>
				<th class="text-left">DESCRIÇÃO DO PRODUTO</th>
				<th class="text-center">VALOR EM REAIS</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="text-center" colspan="2">Nenhum dado ainda...</td>
			</tr>
		</tbody>
	</table>
	
	
	
	<div>	
		<div class="btn-group">
		  <button class="btn btn-default" id="anterior" disabled>&lsaquo; Anterior</button>
		  <button class="btn btn-default" id="numeracao" type="button"></button>
		  <button class="btn btn-default" id="proximo" disabled>Próximo &rsaquo;</button>
		</div>
	</div>
	
	
	
</body>
</html>

Porém no VAR DADOS, precisaria buscar dados do banco de dados em ASP, para jogar alí, há COMO????
Desde já agradeço, contribuições....


Tankyou....

Compartilhar este post


Link para o post
Compartilhar em outros sites

Acabei postando e consegui resolver assim, só com ASP, não sei é o certo, mas foi uma alternativa, serve para contribuição e estudo de aprimoramentos do código,.... segue!!!!

 

	<%
	  cOPCAO = "cad1"
	   
	   
		paginacaoJQ = paginacaoJQ & "<script type='text/javascript'>"
		paginacaoJQ = paginacaoJQ & "var dados = ["
	   
	   
	   			IF cOPCAO = "cad1" THEN
	   		    SET strRS = conexao.execute("SELECT * FROM cockpit_categoriasA")
	   				
	   				DO WHILE NOT strRS.EOF
					paginacaoJQ = paginacaoJQ & "['"& strRS("id") &"', '"& strRS("categorias_nome") &"', '"& strRS("categorias_icone") &"', '"& strRS("categorias_cor") &"', '"& strRS("id") &"' ],"
	                             strRS.MoveNext
	   					               Loop
	                         SET strRS = Nothing
	   
	   			END IF
	   
	   
	            IF cOPCAO = "cad2" THEN
	   			SET strRS = conexao.execute("SELECT * FROM cockpit_categoriasB")
	   
	   	   			DO WHILE NOT strRS.EOF
					paginacaoJQ = paginacaoJQ & "['"& strRS("id") &"', '"& strRS("idcat") &"', '"& strRS("subcategorias_icone") &"', '"& strRS("subcategorias_nome") &"', '"& strRS("subcategorias_titulo") &"', '"& strRS("subcategorias_cor") &"', '"& strRS("cores_nome") &"' ],"
	                             strRS.MoveNext
	   					               Loop
	                         SET strRS = Nothing
	   			END IF
	   
	   
	   			IF cOPCAO = "cad3" THEN
	   		    SET strRS = conexao.execute("SELECT * FROM cockpit_categoriasC")
	   
	   	   	   		DO WHILE NOT strRS.EOF
					paginacaoJQ = paginacaoJQ & "['"& strRS("id") &"', '"& strRS("idsubcat") &"', '"& strRS("subcategoriassub_icone") &"', '"& strRS("subcategoriassub_titulo") &"', '"& strRS("subcategoriassub_cor") &"', '"& strRS("cores_nome") &"' ],"
	                             strRS.MoveNext
	   					               Loop
	                         SET strRS = Nothing
	   			END IF
	   
	   
		paginacaoJQ = paginacaoJQ & "];"
		paginacaoJQ = paginacaoJQ & "var tamanhoPagina = 6;"
		paginacaoJQ = paginacaoJQ & "var pagina = 0;"
		paginacaoJQ = paginacaoJQ & ""
		paginacaoJQ = paginacaoJQ & "function paginar() {"
		paginacaoJQ = paginacaoJQ & "$('table > tbody > tr').remove();"
		paginacaoJQ = paginacaoJQ & "var tbody = $('table > tbody');"
	   
	   
		paginacaoJQ = paginacaoJQ & "for (var i = pagina * tamanhoPagina; i < dados.length && i < (pagina + 1) * tamanhoPagina; i++) {"
		paginacaoJQ = paginacaoJQ & "tbody.append($('<tr>')"
	   
	   
					  paginacaoJQ = paginacaoJQ & ".append($('<td class=""text-left"">')"
					  paginacaoJQ = paginacaoJQ & ".append(dados[i][0]))"
					  paginacaoJQ = paginacaoJQ & ".append($('<td>')"
					  paginacaoJQ = paginacaoJQ & ".append(dados[i][1]))"
	   
	   				  paginacaoJQ = paginacaoJQ & ".append($('<td class=""text-left"">')"
					  paginacaoJQ = paginacaoJQ & ".append(dados[i][2]))"
					  paginacaoJQ = paginacaoJQ & ".append($('<td>')"
					  paginacaoJQ = paginacaoJQ & ".append(dados[i][3]))"
	   
	   				  paginacaoJQ = paginacaoJQ & ".append($('<td class=""text-left"">')"
					  paginacaoJQ = paginacaoJQ & ".append(dados[i][4]))"
	   
	   
		paginacaoJQ = paginacaoJQ & ")}"
		paginacaoJQ = paginacaoJQ & "$('#numeracao').text('Página ' + (pagina + 1) + ' de ' + Math.ceil(dados.length / tamanhoPagina));"
		paginacaoJQ = paginacaoJQ & "}"

		paginacaoJQ = paginacaoJQ & "function ajustarBotoes() {"
		paginacaoJQ = paginacaoJQ & "$('#proximo').prop('disabled', dados.length <= tamanhoPagina || pagina >= Math.ceil(dados.length / tamanhoPagina) - 1);"
		paginacaoJQ = paginacaoJQ & "$('#anterior').prop('disabled', dados.length <= tamanhoPagina || pagina == 0);"
		paginacaoJQ = paginacaoJQ & "}"
		paginacaoJQ = paginacaoJQ & "$(function () {"
		paginacaoJQ = paginacaoJQ & "$('#proximo').click(function () {"
		paginacaoJQ = paginacaoJQ & "if (pagina < dados.length / tamanhoPagina - 1) {"
		paginacaoJQ = paginacaoJQ & "pagina++;"
		paginacaoJQ = paginacaoJQ & "paginar();"
		paginacaoJQ = paginacaoJQ & "ajustarBotoes();"
		paginacaoJQ = paginacaoJQ & "}"
		paginacaoJQ = paginacaoJQ & "});"
		paginacaoJQ = paginacaoJQ & "$('#anterior').click(function () {"
		paginacaoJQ = paginacaoJQ & "if (pagina > 0) {"
		paginacaoJQ = paginacaoJQ & "pagina--;"
		paginacaoJQ = paginacaoJQ & "paginar();"
		paginacaoJQ = paginacaoJQ & "ajustarBotoes();"
		paginacaoJQ = paginacaoJQ & "}"
		paginacaoJQ = paginacaoJQ & "});"
		paginacaoJQ = paginacaoJQ & "paginar();"
		paginacaoJQ = paginacaoJQ & "ajustarBotoes();"
		paginacaoJQ = paginacaoJQ & "});"
		paginacaoJQ = paginacaoJQ & "</script>"
	   
	   
	   response.write paginacaoJQ
	%>

E isso aí, quem souber de outras alternativas, vale POSTAR...
Bem interessante ficou...

Até...

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por luiz monteiro
      Olá. Tenho 3 formulários em uma mesma pagina, onde cada um tem 1 input type text.
      O que preciso é recuperar o nome desses inputs e o valor correspondente ao formulário submetido.
      =============
      form name="formulario1" id="formulario1"
      input type="text" name="nome1" value="valor1" /form
      form name="formulario2" id="formulario2"
      input type="text" name="nome2" value="valor2" /form
      form name="formulario3" id="formulario3"
      input type="text" name="nome3" value="valor3" /form
      =============
      ..........
      var formulario_submetido = document.getElementById("formulario1"); formulario_submetido.addEventListener('submit', function(e) { e.preventDefault(); //tentei console.log(document.querySelectorAll('#'+this.id + ' input').name); //tentei var formula = new FormData(formulario_submetido); console.log(formula.input['type=text'].name); //tentei console.log(formula.get(input['type=text']).name); ..........
        no console.log(e), ele está nessa hierarquia   form -> srcElement -> input -> attributes -> name 
      Como recupero o valor do name dele e o valor do value?
       
      Agradeço desde já.
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • Por ment0r
      Boa noite pessoal, tudo bem?
       
      Estou desenvolvendo um sistema simples com exibição de formulário via modal. Uma vez cadastrado o serviço (tabela possui apenas dois campos, id e nome), eles são exibidos numa tabela com um ícone que permite a alteração do nome.

       
      Eu clico no ícone e é chamado um modal que é gerado via ajax (pois são vários registros).
       

       
      Nesse modal é mostrado o serviço e uma vez alterado, o botão Salvar chama uma função que atualiza a tabela servico, concluindo a tarefa. Fiz o mesmo processo pra cadastrar o serviço, com a diferença de que o modal está presente na mesma página, ou seja, não é chamado via ajax.
       
      Eis os códigos:
      <a href="#" onclick="modalUpdate(<?= trim($array['id']) ?>)"> <i class='bx bx-edit'></i> </a> // Trecho onde eu chamo a função modalUpdate. Função btAltServico click:
      $('#btAltServico').click(function() { var inpnome = $('#nome'); var inpid = $('#id'); if (inpnome.val() == '') { swal("Atenção", "Por favor, preencha os campos obrigatórios", "warning"); if (inpnome.val() == '') { inpnome.css("border","2px solid #f94545"); } else { inpnome.css("border",""); } alert(inpnome); alert(inpid); } else { $.ajax({ url: '../inc/ajax/altServico.php', type: 'post', dataType: 'json', // pode ser html data: { nome : inpnome.val(), id : inpid.val() }, success: function(resposta){ if (resposta == 1) { inpnome.val(""); inpnome.css("border",""); swal("Sucesso", "Serviço alterado", "success"); } else { if (resposta == 0) { swal("Erro", "Serviço não alterado. Log de erro gerado.", "error"); } else { swal("Atenção", "Serviço já cadastrado", "warning"); } } } }) } });  
      E modalUpdate.php :
       
      <?php /* * altServico.php * * Script responsável pelo update de serviços na tabela servico * * Função chamada pelo arquivo ajax.js */ //if ($_POST) { require'../conn.php'; require'../../class/class.geral.php'; $geral = new Geral(); $nome = $_POST['nome']; $id = $_POST['nome']; $ativo = 1; // Verifica se o servico já foi cadastrado $sqlVer = "select nome from algo68_db_cliente.servico where nome = '".$nome."' and id <> ".$id.""; $queryVer = mysqli_query($conn, $sqlVer); $resultVer = mysqli_num_rows($queryVer); if ($resultVer > 0) { echo json_encode(2); // servico já cadastrado } else { // Update do servico $sql = "update algo68_db_cliente.servico set nome = '".$nome."', ativo = ".$ativo." where id = ".$id; $query = mysqli_query($conn, $sql); $result = mysqli_affected_rows($conn); if ($result > 0) { echo json_encode(1); // alterou o servico } else { $geral->logErro(date('d/m/Y|H:i:s'), @$_SERVER[REQUEST_URI], 'AlterarServico', mysqli_error($conn)); echo json_encode(0); // não alterou o servico } } //} ?> O problema é que quando clico no botão Salvar, não acontece nada - se eu colocar um alert qualquer na função click, só pra saber se está chegando, também não da nada. E está da mesma forma que o cadastro de serviço, que funciona perfeitamente.

      Bom, é isso pessoal, tentei ser o mais breve e especifico possível. Qualquer ajuda é bem vinda, obrigado a todos, desde já.
    • Por Danilo - Jesus voltará!
      Olá pessoal, tenho uma div a qual através de um select categorias eu trago dados de empresas do banco, aí preciso clicar nas listagens das empresas e pegar o ID quando clica no checkbox e gravar pelo ajax novamente na session feita no arquivo php tipo um carrinho de compras, que essa parte já tenho... só não to conseguindo pegar os ids gerados dinamicamente no retorno feito do ajax, eles aparecem com F12 ao inspecionar, mas não aceita eu clicar para pegar o ID, acho que é algo de DOM, mas não to sabendo fazer... alguém aí saberia me ajudar como pegar esses ids ao clicar, já que eles vem dinamicamente?
       
      obrigado
×

Informação importante

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