Question

Buenas tardes,
Solicito su ayuda con el siguiente problema:
No me permite editar o eliminar cuando se carga la segunda pagina en adelante de mi DataTables solo me permite los primeros 10 registros, estos si se editan y se eliminan.
Muchas Gracias.

Comments

¿Editar como?
¿Sale algún error?

---

Gracias Peter por mostrar interes en ayudame.
Lo que sucede es que creo la tabla utilizando datatable y esa tabla tiene 200 registros, en la tabla tiene dos botones al frente por cada registro que es editar y eliminar, cuando se le da ckick se abre una ventana modal y permite editar y grabar el registro lo mismo sucede con el boton eliminar permite abrir una ventana modal y eliminar el registro.
Pero cuando llega al registro 11 que es otra pagina ya no lo permite realizar, se le da ckick y no abre la ventana modal, lo mismo cuando se le da ckick en eliminar.
He realizado muchas consultas y esto le sucede a muchas personas pero no son claros al explicar y no me funciona lo que ellos dicen:
Ejemplo de las respuestas que he encontrado:
en ese momento solo la primera página está disponible en el DOM y solo los botones de la primera página se unirán.
Lo que debe hacer es volver a vincular sus eventos cada vez que cambie la página. Para esto, necesita llamar a su código jQuery de enlace (digamos que tiene un método llamado BindEvents() que hace eso) en el fnDrawCallback evento de su DataTable:

mi codigo es el siguiente:
la tabla:

<table id="example1" class="table table-bordered">
                <thead>

                  <th>Usuario</th>
                  <th>Foto</>
                  <th>Nombre completo</th>   
                  <th>Fecha de Inicio</th>
                  <th>Fecha Creado Registro</th>
                  <th>Acción</th>
                </thead>
                <tbody>
                  <?php
                    $sql = "SELECT * FROM admin";
                    $query = $conn->query($sql);
                    while($row = $query->fetch_assoc()){
                        ?>
                        <tr>

                          <td><?php echo $row['username']; ?></td>
                          <td><img src="<?php echo (!empty($row['photo']))? '../images/'.$row['photo']:'../images/profile.jpg'; ?>" width="30px" height="30px"> <a href="#edit_photo" data-toggle="modal" class="pull-right photo" data-id="<?php echo $row['id']; ?>"><span class="fa fa-edit"></span></a></td>
                           <td><?php echo $row['firstname'].' '.$row['lastname']; ?></td>
                          <td><?php echo date('M d, Y', strtotime($row['created_on'])) ?></td>
                         <td><?php echo date('M d, Y', strtotime($row['fechacreacion'])) ?></td>
                          <td>
                            <button class="btn btn-success btn-sm edit btn-flat" data-id="<?php echo $row['id']; ?>"><i class="fa fa-edit"></i> Editar</button>
                            <button class="btn btn-danger btn-sm delete btn-flat" data-id="<?php echo $row['id']; ?>"><i class="fa fa-trash"></i> Eliminar</button>
                          </td>
                        </tr>
                      <?php
                    }
                  ?>
                </tbody>
              </table>

$(function(){
    $('.edit').click(function(e){
    e.preventDefault();
    $('#edit').modal('show');
    var id = $(this).data('id');
    getRow(id);
  });

  $('.delete').click(function(e){
    e.preventDefault();
    $('#delete').modal('show');
    var id = $(this).data('id');
    getRow(id);
  });
   $('.photo').click(function(e){
    e.preventDefault();
    var id = $(this).data('id');
    getRow(id);
  });
  });

Lo que he entendido es que el codigo que dice funcion debo cambiarlo alli esta el problema pero he realizado varias modificaciones y no me funciona.
Gracias en lo que me puedas ayudar, por que se que muchas personas tienen este error

---

Buenas noches solicito la colaboracion de alqun compañero que pueda ayudarme a solucionar dicho error.

llevo mucho tiempo en esto y no he logrado solucionarlo.

Les agradezco a la persona que pueda ayudarme.

Muchas gracias, Quedo atenta

Answer 1

Basado en tu descripción, parece que el problema está relacionado con la paginación de DataTables. Por defecto, DataTables divide los resultados en varias páginas y solo muestra un número limitado de registros por página. Cuando se hace clic en el botón de editar o eliminar en la página 2 (o posteriores), es posible que no se esté capturando correctamente el evento debido a la forma en que se maneja la paginación.

Para solucionar este problema, puedes intentar utilizar el evento delegado de jQuery para capturar los clics en los botones de editar y eliminar, incluso para los registros que están en páginas posteriores. Aquí hay un ejemplo de cómo hacerlo:

javascript

$(document).ready(function() {
  $('#example1').on('click', '.edit', function() {
    // Código para abrir la ventana modal de edición
    // Puedes acceder al ID del registro utilizando $(this).data('id')
  });

  $('#example1').on('click', '.delete', function() {
    // Código para abrir la ventana modal de eliminación
    // Puedes acceder al ID del registro utilizando $(this).data('id')
  });
});

En este ejemplo, estamos utilizando el evento click en el elemento con el ID example1, pero estamos especificando el selector .edit o .delete para capturar los clics en los botones de editar y eliminar, respectivamente. Esto asegura que los eventos se capturen incluso en elementos que se agregan dinámicamente en páginas posteriores debido a la paginación de DataTables.

Asegúrate de colocar este código después de cargar las bibliotecas de jQuery y DataTables en tu página. Con esto, deberías poder capturar los clics en los botones de editar y eliminar en todas las páginas de la tabla.

<script>
$(document).ready(function() {
  $('#example1').on('click', '.edit', function() {
    $('.edit').click(function(e){
    e.preventDefault();
    $('#edit').modal('show');
    var id = $(this).data('id');
    getRow(id);
  });

  $('.delete').click(function(e){
    e.preventDefault();
    $('#delete').modal('show');
    var id = $(this).data('id');
    getRow(id);
  });

    // Código para abrir la ventana modal de edición
    // Puedes acceder al ID del registro utilizando $(this).data('id')
  });

  $('#example1').on('click', '.delete', function() {
    $('.edit').click(function(e){
    e.preventDefault();
    $('#edit').modal('show');
    var id = $(this).data('id');
    getRow(id);
  });

  $('.delete').click(function(e){
    e.preventDefault();
    $('#delete').modal('show');
    var id = $(this).data('id');
    getRow(id);
  });

    // Código para abrir la ventana modal de eliminación
    // Puedes acceder al ID del registro utilizando $(this).data('id')
  });
});
</script>

Espero que esta solución te ayude a resolver el problema. Si aún tienes dificultades, por favor proporciona más detalles o el código relevante para que pueda brindarte una ayuda más precisa.