Publicado em 3 de mai.

checkbox não funcionando em DataTables

#javascript #checkbox #datatables #jquery

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á

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

marsolim· 3 de mai.

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);
});

matheusmarson· 3 de mai.

É um checkbox por linha da tabela

Não dá para por id

Creio que o problema seja com a DataTable pois na página 1 funciona

Já nas demais páginas não

William Bruno· 3 de mai.

você deve usar event delegation

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

matheusmarson· 3 de mai.

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

michel a. medeiros· 5 de mai.

<!DOCTYPE html>

<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>

<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>

matheusmarson· 5 de mai.

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