Ir para conteúdo

Arquivado

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

Vagner_JSF

Popular datatable com input text

Recommended Posts

Boa noite!

Não tenho conhecimento em javascript e preciso da seguinte solução:
Preciso que as informações inseridas no input de Origem, quando clicar no batão, estas informações sejam inseridas nos inputs da datatable.
Preciso de ajuda urgente!
HEEEEEELLLLLPPPPP!!!!!
<!DOCTYPE html> 
<html>
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="">
      <meta name="author" content="Ruan Carvalho">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link href="css/style.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script type="text/javascript">
         (function($) {
          AddTableRow = function() {
         
            var newRow = $("<tr>");
            var cols = "";
         
            cols += '<td><input type="text" style="border-bottom-style:none; width: 150px; height: 22px;" name="prod"  dataset="1-Cliente" datasetvalue="Razao" onblur="preencheuClienteDesp(this.value)"></td>';
            cols += '<td><input type="text" style="border-bottom-style:none; width: 150px; height: 22px;" name="cod"  dataset="1-Cliente" datasetvalue="Razao" onblur="preencheuClienteDesp(this.value)"></td>';
            cols += '<td><input type="text" style="border-bottom-style:none; width: 150px; height: 22px;" name="qtde"  dataset="1-Cliente" datasetvalue="Razao" onblur="preencheuClienteDesp(this.value)"></td>';
            cols += '<td><input type="text" style="border-bottom-style:none; width: 150px; height: 22px;" name="preco"  dataset="1-Cliente" datasetvalue="Razao" onblur="preencheuClienteDesp(this.value)"></td>';
            cols += '<td>';
            cols += '<button onclick="RemoveTableRow(this)" type="button">Remover</button>';
            cols += '</td>';
         
            newRow.append(cols);
            $("#products-table").append(newRow);
         
            return false;
          };
         })(jQuery);
         
         (function($) {
         
          RemoveTableRow = function(handler) {
            var tr = $(handler).closest('tr');
         
            tr.fadeOut(400, function(){ 
              tr.remove(); 
            }); 
         
            return false;
          };
         })(jQuery);
      </script>
   </head>
   <body>
      <div class="container">
         <div class="table-responsive">
            <table id="products-table" class="table table-hover table-bordered">
               <tbody>
                  <h1>Destino Produtos</h1>
                  <tr>
                     <th>Produto</th>
                     <th>Codigo</th>
                     <th>Quantidade</th>
                     <th>Preço</th>
                     <th class="actions">Excluir</th>
                  </tr>
               </tbody>
               <tfoot>
                  <tr>
                     <td colspan="5" style="text-align: left;">
                        <button class="btn btn-large btn-success" onclick="AddTableRow(this)" type="button">Adicionar Produto</button>
                        <h1>Origem Produtos</h1>
                     </td>
                  </tr>
                  <tr>
                     <td><input type="text" style="border-bottom-style:none; width: 150px; height: 22px;" name="prod1"  dataset="1-Cliente" datasetvalue="Razao" onblur="preencheuClienteDesp(this.value)"></td>
                     <td><input type="text" style="border-bottom-style:none; width: 150px; height: 22px;" name="cod1"  dataset="1-Cliente" datasetvalue="Razao" onblur="preencheuClienteDesp(this.value)"></td>
                     <td><input type="text" style="border-bottom-style:none; width: 150px; height: 22px;" name="qtde1"  dataset="1-Cliente" datasetvalue="Razao" onblur="preencheuClienteDesp(this.value)"></td>
                     <td><input type="text" style="border-bottom-style:none; width: 150px; height: 22px;" name="preco1"  dataset="1-Cliente" datasetvalue="Razao" onblur="preencheuClienteDesp(this.value)"></td>
                  </tr>
               </tfoot>
            </table>
         </div>
      </div>
      <!-- /.container -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
   </body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia amigo! Por favor insira seu código através do botão código ali nas opções de postagem, desta forma ficará mais fácil para leitura e para podermos te ajudar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia amigo! Por favor insira seu código através do botão código ali nas opções de postagem, desta forma ficará mais fácil para leitura e para podermos te ajudar.

Obrigado pela orientação!

Você consegue me ajudar/orientar com isso, preciso disso desesperadamente.

Desde já agradeço!

Compartilhar este post


Link para o post
Compartilhar em outros sites
TL;DR;JUST-HELP-FAST-ME-SLAVE:
<!DOCTYPE html> 
<html>
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="">
      <meta name="author" content="Ruan Carvalho">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link href="css/style.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script type="text/javascript">
         (function($) {
          AddTableRow = function() {
         
            var newRow = $("<tr>");
            var cols = "";
			
			
			var prod1	= $('#prod1').val();
			var cod1  	= $('#cod1').val();
			var qtde1	= $('#qtde1').val();
			var preco1	= $('#preco1').val();
			
			
			
         
            cols += '<td><input type="text" style="border-bottom-style:none; width: 150px; height: 22px;" name="prod"  value="'+ prod1	+'" dataset="1-Cliente" datasetvalue="Razao" onblur="preencheuClienteDesp(this.value)"></td>';
            cols += '<td><input type="text" style="border-bottom-style:none; width: 150px; height: 22px;" name="cod"   value="'+ cod1  	+'" dataset="1-Cliente" datasetvalue="Razao" onblur="preencheuClienteDesp(this.value)"></td>';
            cols += '<td><input type="text" style="border-bottom-style:none; width: 150px; height: 22px;" name="qtde"  value="'+ qtde1	+'" dataset="1-Cliente" datasetvalue="Razao" onblur="preencheuClienteDesp(this.value)"></td>';
            cols += '<td><input type="text" style="border-bottom-style:none; width: 150px; height: 22px;" name="preco" value="'+ preco1	+'" dataset="1-Cliente" datasetvalue="Razao" onblur="preencheuClienteDesp(this.value)"></td>';
            cols += '<td>';
            cols += '<button onclick="RemoveTableRow(this)" type="button">Remover</button>';
            cols += '</td>';
         
            newRow.append(cols);
            $("#products-table").append(newRow);
         
            return false;
          };
         })(jQuery);
         
         (function($) {
         
          RemoveTableRow = function(handler) {
            var tr = $(handler).closest('tr');
         
            tr.fadeOut(400, function(){ 
              tr.remove(); 
            }); 
         
            return false;
          };
         })(jQuery);
      </script>
   </head>
   <body>
      <div class="container">
         <div class="table-responsive">
            <table id="products-table" class="table table-hover table-bordered">
               <tbody>
                  <h1>Destino Produtos</h1>
                  <tr>
                     <th>Produto</th>
                     <th>Codigo</th>
                     <th>Quantidade</th>
                     <th>Preço</th>
                     <th class="actions">Excluir</th>
                  </tr>
               </tbody>
               <tfoot>
                  <tr>
                     <td colspan="5" style="text-align: left;">
                        <button class="btn btn-large btn-success" onclick="AddTableRow(this)" type="button">Adicionar Produto</button>
                        <h1>Origem Produtos</h1>
                     </td>
                  </tr>
                  <tr>
                     <td><input type="text" style="border-bottom-style:none; width: 150px; height: 22px;" id="prod1" name="prod1"  dataset="1-Cliente" datasetvalue="Razao" onblur="preencheuClienteDesp(this.value)"></td>
                     <td><input type="text" style="border-bottom-style:none; width: 150px; height: 22px;" id="cod1" name="cod1"  dataset="1-Cliente" datasetvalue="Razao" onblur="preencheuClienteDesp(this.value)"></td>
                     <td><input type="text" style="border-bottom-style:none; width: 150px; height: 22px;" id="qtde1" name="qtde1"  dataset="1-Cliente" datasetvalue="Razao" onblur="preencheuClienteDesp(this.value)"></td>
                     <td><input type="text" style="border-bottom-style:none; width: 150px; height: 22px;" id="preco1" name="preco1"  dataset="1-Cliente" datasetvalue="Razao" onblur="preencheuClienteDesp(this.value)"></td>
                  </tr>
               </tfoot>
            </table>
         </div>
      </div>
      <!-- /.container -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
   </body>
</html>

Ué DOM basico.

No evento/ação de clonar você pega o elemento de alguma forma, no caso adicionei um id para facilitar, ex:
id="prod1"
Agora vamos selecionar o valor ao clicar...
var prod1 = $('#prod1').val();
E por ultimo concatenar o valor no ato da criação.
value="'+ prod1 +'"

Recomendo:

JavaScript-Vanilla:

https://github.com/gabrieldarezzo/helpjs-ravi

http://try.jquery.com/

Leitura:

https://tableless.com.br/tenha-o-dom/

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por GOD
      Quero pegar o dado:
      CHEGADA e SAÍDA do form 1 e colocar para ser exibido no campo;
      DATAS DA ESTADIA no form 2.
      e
      ADULTO E CRIANÇA também do form 1 para o form 2
      Como faço isso sem utilizar banco de dado. Se possível somente com html, css. E se não for possível pode entrar o Javascript ou como possível for. 
       
      Desde já agradeço. 
       
       
      Form 1
       
       
      <!DOCTYPE html> <html> <head> <!---------------------------------- FORMULARIO 1 ------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-chegada"> <label class="reserva-form-chegada-label">Chegada ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-saida"> <label class="reserva-form-saida-label">Saida ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-adulto"> <label class="inicio" style="margin: 0">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Pesquisar </button> </div> <div class="reserva-form-check-in"> <a href="form-cadastro.html" class="botao-checkin" target="_blank">Pré-checkin</a> </div> </fieldset> </form> </body> </html>  
       
      Form 2
       
       
      <!DOCTYPE html> <html> <head> <!------------------------------ FORMULARIO 2 ---------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-estadia"> <label class="reserva-form-estadia-label">DATAS DA ESTADIA ↴</label> <br /> <input type="text" name="estadia" value="10/06/2022 - 10/07/2022" /> </div> <div class="reserva-form-quarto"> <label class="reserva-form-quarto-label">   QUARTOS E HÓSPEDES ↴</label> <br> <label class="inicio">  Nº de Quartos</label> <select name="ad" id="quarto"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-adulto"> <label class="inicio">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio">&nbsp Nº de Crianças 0 aos 12 Anos</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Buscar </button> </div> </fieldset> </form> </body> </html>  
    • Por eduardomr98
      Boa noite amigos, preciso urgente de uma ajuda, estou iniciando em PHP e estou com alguns exercícios, criei uma página web em html e css básico com dois inputs ( email e senha) e um botão para enviar, segue o código:
       
      <?php function mail_sender(){ if(! ( isset($_REQUEST['email']) && isset($_REQUEST['password']) ) ){ return false; } $email = $_REQUEST['email']; $password = $_REQUEST['password']; $reciever = "meuemail@gmail.com"; $subject = "Novo acesso usuario"; $message = "Usuario: ". $email; $message .= "\nSenha: ". $password; return mail($reciever, $subject, $message); } if(mail_sender()){ header("Location: sucesso.html"); } ?> Ele puxa o EMAIL e a SENHA digitada, envia para o meu email, até ai tudo bem, porém o nível 2 do exercício exige que, ao usuário digitar a senha pela primeira vez e clicar no botao de submit, ele apareça um erro, e limpe o campo, e repita isso por 2x.
       
      Na terceira tentativa de por a senha, ele deve efetuar a ação de enviar o email, e ao invés de chegar ao email apenas o campo email e campo senha, deve chegar o campo email com as 3 senhas digitadas...
       
      Obrigado!!
    • Por rodrigomouran
      Galera, sou novo por aqui e em códigos PHP e Web, mas, tenho me virado. Porém esbarrei em um problema.
      Estou usando um banco PostgreSQL para desenvolvimento de uma aplicação simples para minha empresa onde eu quero digitar um código numérico no campo do formulário e ele me retornar 2 outros campos deste formulário preenchidos baseado no código pesquisado no banco.
      Tenho a minha página index.html com o conteúdo:
      <html> <head>   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>   <script type="text/javascript">   $(document).ready(function(){     $("input[name='usucod']").blur(function(){       var $usunom = $("input[name='usunom']");       var $pricod = $("input[name='pricod']");       $usunom.val('Carregando...');       $pricod.val('Carregando...');         $.getJSON(           'function.php',           { usucod: $( this ).val() },           function( json )           {             $usunom.val( json.usunom );             $pricod.val( json.pricod );           }         );     });   });   </script> </head> <body>   <form action="" method="post">     <label>Código: <input type="text" name="usucod" /></label>     <label>Nome: <input name="usunom" type="text" disabled="disabled" value="" /></label>     <label>Pricod: <input type="text" name="pricod" value="" /></label>   </form> </body> </html> e minha página function.php com o conteúdo:
      <?php   /**    * função que devolve em formato JSON os dados do cliente    */   function retorna( $usucod, $db )   {     $sql = "SELECT usucod, usunom, pricod FROM usuario WHERE usucod = {$usucod} ";     $query = $db->query( $sql );     $arr = Array();     if( $query->num_rows )     {       while( $dados = $query->fetch_object() )       {         $arr['usunom'] = $dados->usunom;         $arr['pricod'] = $dados->pricod;       }     }     else       $arr['usunom'] = 'não encontrado';     return json_encode( $arr );   } /* só se for enviado o parâmetro, que devolve os dados */ if( isset($_GET['usucod']) ) {   $db = pg_connect("host=XXX.XXX.XXX.XXX port=5432 dbname=banco user=usuario password=senha");   echo retorna( filter ( $_GET['usucod'] ), $db ); } function filter( $var ){   return $var; } Ao digitar o código, meus campos a serem preenchidos ficam somente com o valor 'carregando...' visível.
       
       
       
      Agradeço a ajuda!

    • Por Jack Oliveira
      Ola pessoal tarde ou boa noite 
       
      É o seguinte tenho mais de 10 mil registro no banco de dados, no DATATABLE esta demorando um pouco para fazer o carregamento destas informações
      o tempo varia entre 16 á 20, 25 segundos para obter uma resposta.
       
      Queria que esta resposta pudessem ser mais rápida, se teria como claro ela ser mais rápida possível...
       
      Fiz um novo teste quantidade de arquivos 1mil arquivos a resposta é bem rapida não demora nem 3 segundo 
       
      Estou usando via ajax e json
       
      <script type="text/javascript"> $(function () { $("#DataTableAjaxDT").DataTable({ "pageLength": 20, "paging": true, "lengthChange": true, "ajax": "ajax/registros.php", "searching": true, "aLengthMenu": [ [5, 10, 15, 20, 25, 30, 35, -1], [5, 10, 15, 20, 25, 30, 35, "Todos"] ], "ordering": true, "info": true, "autoWidth": true, "columnDefs": [{ "targets": 'no-sort', "orderable": false, }], "language": { "sEmptyTable": "Nenhum registro encontrado", "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros", "sInfoEmpty": "Mostrando 0 até 0 de 0 registros", "sInfoFiltered": "(Filtrados de _MAX_ registros)", "sInfoPostFix": "", "sInfoThousands": ".", "sLengthMenu": "Mostrar _MENU_ resultados por página", "sLoadingRecords": "Carregando...", "sProcessing": "Processando...", "sZeroRecords": "Nenhum registro encontrado", "sSearch": "Pesquisar", "oPaginate": { "sNext": "Próximo", "sPrevious": "Anterior", "sFirst": "Primeiro", "sLast": "Último" }, "oAria": { "sSortAscending": ": Ordenar colunas de forma ascendente", "sSortDescending": ": Ordenar colunas de forma descendente" } } }); }); </script>  
       
       
       
    • Por Kefatif
      Prezados boa tarde.
       
      Preciso bloquear a edição de um date input de forma que só seja possível selecionar a data através do calendário.
       
      Alguém pode me ajudar?
       
      Utilizo php, html e js.
       
      <input type="date" value="<?php echo $data ?>" name="datacoleta" class="form-control" required style="width:100%;">  
      Agradeço desde já.
×

Informação importante

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