Jump to content
matheusmarson

checkbox não funcionando em DataTables

Recommended Posts

Galeria

 

Estou com um problema com checkbox e DataTables e se alguém puder me ajudar agradeço bastante.

É o seguinte

Tenho uma table DataTable que em cada linha tem um checkbox para habilitar ou desabilitar a exibição do registro no front-end

Minha intensão é pegar o id deste checkbox e setar lá no BD

Fiz como teste o seguinte somente para ver se id retornado estava correto:

$('input[name="publicado[]"]').on('change', function (event) {
	var id = this.value;
	alert(id);
});

 

Na primeira página da tabela tudo funciona normal

Mas se eu usar a paginação e exibir os dados das demais páginas não fuciona.

Porque?

Alguém saberia me dizer?

Já tiveram problema parecido?

 

Obrigado desde já

Share this post


Link to post
Share on other sites

se é só um imput tenta botar uma id nele tipo id='publicado' e usar essa id assim pra ver se funfa

 

$('#publicado').change(function(){
    var id = this.value;
    alert(id);
});

 

Share this post


Link to post
Share on other sites

você deve usar event delegation

 

$('body').on('change', 'input[name="publicado[]"]', function (event) {
	var id = this.value;
	alert(id);
});

 

Share this post


Link to post
Share on other sites

Oi Willian

 

Não deu certo não

Não exibe o id do elemento não

Creio que o problema seja com a Datatable mesmo e não com a forma de pegar o ID

 

Mas valew pela força

Share this post


Link to post
Share on other sites
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <link rel="shortcut icon" href="Retro.png"/>
        <title>checkbox não funcionando em DataTables</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	 
    <body>
		<table class="table">
		  <thead>
		    <tr>
		      <th>#</th>
		      <th>First Name</th>
		      <th>Last Name</th>
		      <th>Status</th>
		    </tr>
		  </thead>
		  <tbody>
		    <tr>
		      <th scope="row">1</th>
		      <td>Mark</td>
		      <td>Otto</td>
		      <td><input type="checkbox" id="checar" name="1" value="Mark"></td>
		    </tr>
		    <tr>
		      <th scope="row">2</th>
		      <td>Jacob</td>
		      <td>Thornton</td>
		      <td><input type="checkbox" id="checar" name="2" value="Jacob"></td>
		    </tr>
		    <tr>
		      <th scope="row">3</th>
		      <td>Larry</td>
		      <td>the Bird</td>
		      <td><input type="checkbox" id="checar" name="3" value="Larry"></td>
		    </tr>
		  </tbody>
		</table>
	</body>


<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script>
	$(document).on('click',"#checar", function(){
		let codigo = this.name;
		alert(codigo);
	});

</script>


</html>

 

Share this post


Link to post
Share on other sites

Descobri oque ocorreia

Estava colocando o código para o click nos checkbkx em um arquivo .js externo e não funcionava

Coloquei o código dentro da própria página e aí funcionou

 

Obrigado a todos

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ChuChun
      Estou começando a mexer com progromação, estive fazendo um algoritmo de física, mas, quando pedi para que fossem coletados os campos para fazer assim a equação, não da certo, este é o código da parte que estou com dificuldade:

       
      $("#btn1").click(function(){ var comprimento = parseFloat($("#comprimento").val()); var espiras = parseFloat($("#espiras").val()); var no = parseFloat($("#no").val()); var multpi = parseFloat($("#multpi").val()); var pi = parseFloat($("#pi").val()); var amperes = parseFloat($("#amperes").val()); var valor = parseFloat($("#valor").val()); var resultado = (var multpi = parseFloat($("#multpi").val() * var pi = parseFloat($("#pi").val()) * parseFloat($("#no").val()) * (parseFloat($("#espiras").val()) * parseFloat($("#comprimento").val()) )* parseFloat($("#amperes").val());  
    • By lucas70770
      Olá, eu tenho um sistema de pedidos onde em sua tabela a linha impar é os dados do produto e a impar é a grade de produtos, segue o código:
      <table class="tabela-tab-produto"> <thead> <tr> <th width="43"></th> <th>Código</th> <th>Descrição</th> <th>Qtde.</th> <th>Preço Tab.</th> <th>Desc.</th> <th>Preço Líq.</th> <th>Subtotal</th> <th></th> </tr> </thead> <tbody> <tr id="5{1+2,2{4+1"> <td></td> <td>LS</td> <td>Cortinas Listradas</td> <td class="text-right padding-right-15">3 <small>Un</small></td> <td class="text-right"><small>R$</small> 119.9</td> <td class="text-center"></td> <td class="text-right"><small>R$</small> 150</td> <td class="text-right"><small>R$</small> 450</td> <td class="text-right"> <a class="button tiny btn-cinza btn_editar" id="1"><span class="icon icon-pencil"></span></a> <a class="button tiny btn-cinza btn_excluir margin-right-15" data-open="container_excluir" id="86" aria-controls="container_excluir" aria-haspopup="true" tabindex="0"><span class="icon icon-bin"></span></a> </td> </tr> <tr> <td colspan="9"> <div class="medium-12 columns"> <table class="tab-produto"> <thead> <tr> <th></th><th>380x230</th><th>580x230</th> </tr> </thead> <tbody> <tr><td>Azul Claro</td><td>1</td><td>-</td></tr><tr><td>Azul</td><td>-</td><td>2</td></tr> </tbody> </table> </div> </td> </tr><tr id="1{1+1"> <td></td> <td>VLI</td> <td>Cortinas Voil Liso</td> <td class="text-right padding-right-15">1 <small>Un</small></td> <td class="text-right"><small>R$</small> 79.9</td> <td class="text-center"></td> <td class="text-right"><small>R$</small> 79.9</td> <td class="text-right"><small>R$</small> 79.9</td> <td class="text-right"> <a class="button tiny btn-cinza btn_editar" id="3"><span class="icon icon-pencil"></span></a> <a class="button tiny btn-cinza btn_excluir margin-right-15" data-open="container_excluir" id="94" aria-controls="container_excluir" aria-haspopup="true" tabindex="0"><span class="icon icon-bin"></span></a> </td> </tr> <tr> <td colspan="9"> <div class="medium-12 columns"> <table class="tab-produto"> <thead> <tr> <th></th><th>280x230</th> </tr> </thead> <tbody> <tr><td>Azul</td><td>1</td></tr> </tbody> </table> </div> </td> </tr> </tbody> </table> Quero saber como posso apresentar essa tabela com o jspdf e jspdf-autotable(se for necessário). Nos meus testes ele esta tirando a tabela que esta dentro da tabela principal.
      Eu achei um artigo sobre isso(https://stackoverflow.com/questions/39386969/nested-tables-in-a-pdf-using-jspdf-and-jspdf-autotable) mas não consegui aplicar no meu caso. Obg   
    • By holasoycael
      Olá Galera, preciso de uma ajuda! eu tenho um javascript que e precissso chamar a função para criar o valor, mas isso em jquery. Exemplo em Javascript:
       
      <!DOCTYPE html> <html dir="ltr" lang="pt-BR"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- HTML 4 --> <meta charset="utf-8"/><!-- HTML5 --> <script type='text/javascript'> //<![CDATA[ function identityComment(cmmIMG){ var div = document.getElementById(cmmIMG); var imgtag = ""; var img = div.getElementsByTagName("img"); if(img.length>=0) { imgtag = '<div class="avatar-image-container avatar-stock" id="identity'+cmmIMG+'"></div>'; } var summary = imgtag + ''; div.innerHTML = summary; } //]]> </head> <body> <script type='text/javascript'>identityComment("c42456624325326524");</script> <script type='text/javascript'>identityComment("c1099473137990772010");</script> <script type='text/javascript'>identityComment("c6094377602730701704");</script> <script type='text/javascript'>identityComment("c1099473137990772010");</script> </body> </html> Com javascript podemos criar funões indentityComment e o valor gerado em identityComment("c1010101010101"); eu posso chamar de cmmIMG e deixar meu javascript mas flexível.
      OK! mas como chamar uma funão assim em jQuery e colocar valores como o cmmIMG?
      fiz algumas tentaturivas e busca mas, não encontrei nada.
      Agradeço qualquer ajuda!
    • By André_Maronne
      Olá estou encontrando dificuldade em extrair deste arquivo jSON as informações que estão em "banda", através de javascript ou jquery, alquém sabe como fazer?
      { "code":200, "dados":{ "banda":[ { "artista":"Cutting Crew", "musica":"I`ve Been In Love Before", "capa":"https:cutting-crew_-_i-ve-been-in-love-before.jpg" }, { "artista":"George Michael", "musica":"Heal The Pain", "capa":"https:\/\/cdn.jb.fm\/jbfm\/george-michael_-_heal-the-pain.jpg" }]}}
       
      Tentei sem sucesso:
       
      let output = '';
            for (var i = 0; i <= users.lenght; i++) {
       output += '<li><img src=' + users.capa + '>'; '</li>'
            }
            document.getElementById('users').innerHTML = output;
          }
          request.send();
       
    • By lucianfpaula
      Olá meus comprimentos a todos, eu tenha a seguinte duvida, estou desenvolvendo um sistema para condomínios e tenho o seguinte desafio: Usando php e javascript precisa de uma forma de via câmera do pc ou Smartphone reconhecer a placa do veiculo e através de um id associado apresentar as informações do mesmo e também ter a opção de cadastrar o veiculo
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.