In my DataTable I have as functionality to edit the table by clicking on the field (in the style of phpmyadmin) and in turn a button that performs a function .
It must be said that my DataTables has the basic configuration to show the 10-in-10 records .
All records are loaded correctly (2000 records), BUT I have a problem loading the second page in front of my DataTables, that is from register 11 onwards ( only allows me edit the first 10 records ), because it does not allow me to edit the fields in my table, so it only lets me edit the first 10 records that by default load the table, making the other fields are not editable and that in turn can not access the button I have as inside the table.
I appreciate your attention !!!
I share the code.
*** Function in listarclientes.php that calls buscaclientes.php
function buscarClientes(){
$.ajax({
url:"buscarclientes.php",
type:"get",
success: function(data){
$("#clientes").html(data);
},
error: function(){
}
})
}
*** File searchclients.php
* Connection to mysqli database
$sql="SELECT idcliente,nombre,apellido,celular_s from clientes where activo=1";
$stm=$bd->ejecutar($sql);
?>
<div class="table-responsive">
<table id="tablaclientes" class="display" style="width:100%">
<thead>
<tr>
<th>Contacto</th>
<th>Nombre</th>
<th>Apellidos</th>
<th>Contacto Sec.</th>
<th>Inhabilitar</th>
</tr>
</thead>
<tbody>
<tr>
<?php
while($fila=$bd->obtener_fila($stm,0)){
?>
<td data="<?php echo $fila['idcliente'] ?>"><label class="idclientec"><?php echo $fila['idcliente']?></label></td>
<td data="<?php echo $fila['idcliente'] ?>"><label class="nombrec"><?php echo $fila['nombre']?></label></td>
<td data="<?php echo $fila['idcliente'] ?>"><label class="apellidoc"><?php echo $fila['apellido']?></label></td>
<td data="<?php echo $fila['idcliente'] ?>"><label><?php echo $fila['celular_s']?></label></td>
<td data="<?php echo $fila['idcliente'] ?>" class="inhabilitar" style="cursor:pointer">
<i class="fa fa-minus" style="color:red"></i></td>
</tr>
<?php
}
?>
</tbody>
<tfoot>
<tr>
<th>Contacto</th>
<th>Nombre</th>
<th>Apellidos</th>
<th>Contacto Sec.</th>
<th>Inhabilitar</th>
</tr>
</tfoot>
</table>
</div>
<br>
<script>
$(document).ready(function() {
$('#tablaclientes').DataTable( {
"order": [[ 1, "asc" ]],
language: {
"decimal": "",
"emptyTable": "No hay información",
"info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
"infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
"infoFiltered": "(Filtrado de _MAX_ total entradas)",
"infoPostFix": "",
"thousands": ",",
"lengthMenu": "Mostrar _MENU_ Entradas",
"loadingRecords": "Cargando...",
"processing": "Procesando...",
"search": "Buscar:",
"zeroRecords": "Sin resultados encontrados",
"paginate": {
"first": "Primero",
"last": "Ultimo",
"next": "Siguiente",
"previous": "Anterior"
}
},
"pagingType": "full_numbers"
} );
} );
</script>
<script>
$(document).ready(function(){
$(".inhabilitar").click(function(){
var c = confirm('¿Está seguro de Inhabilitar el Cliente con Identificación: '+$(this).attr("data")+'?');
if(c){
eliminarCliente($(this).attr("data"))
}else{
alert('Ha Pulsado Cancelar')
}
})
$(".idclientec").click(function(){
$(this).css("display","none")
var input="<input onblur='ocultaridcliente(this)' type='text' value='"+$(this).text()+"' name='idcliente'> "
$(this).parent("td").append(input);
})
$(".nombrec").click(function(){
$(this).css("display","none")
var input="<input onblur='ocultarnombre(this)' type='text' value='"+$(this).text()+"' name='nombre'> "
$(this).parent("td").append(input);
})
$(".apellidoc").click(function(){
$(this).css("display","none")
var input="<input onblur='ocultarapellido(this)' type='text' value='"+$(this).text()+"' name='apellido'> "
$(this).parent("td").append(input);
})
})
/*Funcion Modificar Idcliente*/
function ocultaridcliente(obj){
actualizaridcliente(obj,$(obj).val())
var label="<label class='idclientec' > "+$(obj).val()+"</label>"
$(obj).parent("td").html(label)
}
function actualizaridcliente(obj,idcliente1){
var valor=$(obj).parent("td").attr("data");
datos="idcliente="+valor+"&idcliente1="+idcliente1
$.ajax({
url:"../actualizar/actualizaridcliente.php",
type:"post",
data: datos,
success: function(data){
alert(data)
buscarClientes()
},
error: function(){
alert(data)
}
})
}
/*Funcion Modificar Nombre cliente*/
function ocultarnombre(obj){
actualizarclientenombre(obj,$(obj).val())
var label="<label class='nombrec' > "+$(obj).val()+"</label>"
$(obj).parent("td").html(label)
}
function actualizarclientenombre(obj,nombre){
var valor=$(obj).parent("td").attr("data");
datos="idcliente="+valor+"&nombre="+nombre
$.ajax({
url:"../actualizar/actualizarclientenombre.php",
type:"post",
data: datos,
success: function(data){
alert(data)
buscarClientes()
},
error: function(){
alert(data)
}
})
}
/*Funcion Modificar Apellido cliente*/
function ocultarapellido(obj){
actualizarclienteapellido(obj,$(obj).val())
var label="<label class='apellidoc' > "+$(obj).val()+"</label>"
$(obj).parent("td").html(label)
}
function actualizarclienteapellido(obj,apellido){
var valor=$(obj).parent("td").attr("data");
datos="idcliente="+valor+"&apellido="+apellido
$.ajax({
url:"../actualizar/actualizarclienteapellido.php",
type:"post",
data: datos,
success: function(data){
alert(data)
buscarClientes()
},
error: function(){
alert(data)
}
})
}
</script>