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 gersonab
      bom dia
      tenho uma aplicação onde gero um arquivo em pdf, gostaria de recuperar a url do pdf q foi criado, pois quando este é criado ele abre automaticamente e ou ja faz o download do mesmo, preciso da url para enviar para outros.
      <button type="button" class="btn btn-outline-primary" onclick="createPDF();">Imprimir</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script> <script language="javascript"> (function($){ $.fn.createPdf = function(parametros) { var config = { 'fileName':'html-to-pdf' }; if (parametros){ $.extend(config, parametros); } var orig = $(this); var widthOrig = $(orig).width(); $(orig).width(900); var quotes = document.getElementById($(orig).attr('id')); html2canvas(quotes, { onrendered: function(canvas) { var pdf = new jsPDF('p', 'pt', 'letter'); for (var i = 0; i <= quotes.clientHeight/900; i++) { var srcImg = canvas; var sX = 0; var sY = 900*i; var sWidth = 900; var sHeight = 900; var dX = 0; var dY = 0; var dWidth = 900; var dHeight = 900; window.onePageCanvas = document.createElement("canvas"); onePageCanvas.setAttribute('width', 900); onePageCanvas.setAttribute('height', 900); var ctx = onePageCanvas.getContext('2d'); ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight); var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0); var width = onePageCanvas.width; var height = onePageCanvas.clientHeight; if (i > 0) { pdf.addPage(612, 791); } pdf.setPage(i+1); pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62)); // Retirar o comentário caso queira ver como está sendo gerado o canvas. //document.body.appendChild(onePageCanvas); } pdf.save(config.fileName); $(orig).width(widthOrig); } }); }; })(jQuery); function createPDF() { $('#renderPDF').createPdf({ 'fileName' : '<?php echo $usercli['idocl']; ?>' }); }  
×

Informação importante

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