5

Me surge un problema al momento de usar jquery Datatables, no se por que no me permite abrir modal dialogs que son llamados después de la fila 10, todo funciona normal en las filas 1 - 10 de la tabla, sin embargo no se que sucede que todas las demás fallan, ya que en consola y en network de chrome no me muestra ningún error, incluso se ejecutan bien las llamadas ajax que tengo, el problema es que los modal dialogs no se abren, el código que tengo es el siguiente:

Llamada Datatables:

$(document).ready(function() {
  $('#datatab').DataTable()
}

Creación tabla html:

public function tablaDet($arreglo, $tipo, $tipoeq){
    $r = json_decode(json_encode($arreglo),TRUE);
    $th = array_keys($r[0]);
    /*echo "<pre>";
    print_r($r);*/
    switch ($tipo) {
      case 'lista':
          $t = "<table id='datatab' class='display'>";
          $t .= "<thead>";
          $t .= "<tr>";
          foreach ($th as $heads => $head) {
            if ($head != "identificador") {
              switch ($head) {
                case 'nombre_depto':
                  $head = "Departamento";
                  break;
                case 'nombre_persona':
                  $head = "Funcionario Actual";
                  break;
                case 'dir_ip':
                  $head = "Dirección Ip";
                  break;
                case 'mac':
                  $head = "Dirección Física";
                  break;
                case 'nro_serie':
                  $head = "Nro. Serie";
                  break;
                case 'codigo_ebye':
                  $head = "Código EBYE";
                  break;
                case 'codigo_activo':
                  $head = "Código Activo";
                  break;
                case 'documentos':
                  $head = "Documentos";
                  break;
                case 'fecha_ingreso':
                  $head = "Fecha Ingreso";
                  break;
                case 'nombre_prod':
                  $head = "Nombre Producto";
                  break;
                case 'nombre_marca':
                  $head = "Marca";
                  break;
                case 'avaluo_inicial':
                  $head = "Avaluo Inicial";
                  break;
                case 'descr_procesador':
                  $head = "Procesador";
                  break;
                case 'nombre_modelo':
                  $head = "Modelo";
                  break;
                case 'nombre_cpu':
                  $head = "CPU";
                  break;
                case 'nombre_mon':
                  $head = "Monitor";
                  break;
                default:
                  # code...
                  break;
              }
              $t .= "<th>".$head."</th>";
            }
          }
          $t .= "<th>Detalles</th>";
          $t .= "<th>Actualizar</th>";
          $t .= "<th>Eliminar</th>";
          $t .= "</tr>";
          $t .= "</thead>";
          $t .= "<tbody>";
          foreach ($r as $files) {
            $t .= "<tr>";
            foreach ($files as $cols => $col) {
              if ($cols != "identificador") {
                $t .= "<td>";
                  $t .= $col;
                $t .= "</td>";
              }
            }

            $t.='<td><a href="#" class="view_'.strtolower($tipoeq).'" id="view_'.strtolower($tipoeq).''.$files['identificador'].'" onClick="obtener'.$tipoeq.'Det('.$files['identificador'].')"><i class="ui-icon ui-icon-circle-zoomout" style="color:black;"></i></button></td>';
            $t.='<td><a href="#" class="act_'.strtolower($tipoeq).'" id="act_'.strtolower($tipoeq).''.$files['identificador'].'" onClick="obtenerCpu('.$files['identificador'].')"><i class="ui-icon ui-icon-refresh" style="color:black;"></i></button></td>';
            $t.='<td><a href="#" onClick="eliminar'.$tipoeq.'('.$files['identificador'].')"><i class="ui-icon ui-icon-trash" style="color:black;"></i></a></td>';
            $t .= "</tr>";
          }
          $t .= "</tbody>";
        $t .= "</table>";
        break;
    default:
        # code...
        break;
    }
    return $t;
  }

Abrir modal Dialog:

$(function() {
      var dialog, form;

      dialog = $( "#details-cpu" ).dialog({
        autoOpen: false,
        height: 500,
        width: "80%",
        modal: true,
        buttons: {

          Cerrar: function() {
            dialog.dialog( "close" );
          }
        },
        close: function() {
          //form[ 0 ].reset();
        }
      });

      form = dialog.find( "form" ).on( "submit", function( event ) {
        event.preventDefault();
        //actUser();
      });

      $('.view_cpu').click(function(e) {
        e.preventDefault();
        dialog.dialog('open');
      });

      /*$( "#act_user" ).button().on( "click", function() {
        dialog.dialog( "open" );
      });*/
    });

EDIT

Aqui pongo el problema en jsfiddle https://jsfiddle.net/s5w74xe7/1/

3
  • ¿Puedes compartir una demo o algo?¿Cuántos elementos hay en cada página de la paginación?
    – Alvaro Montoro
    Commented el 10 may. 2016 a las 0:58
  • Ya coloque mi problema en jsfiddle, como pueden ver el modal que se abre al dar click en detalles, solo se abre hasta la fila 10, de ahi en adelante no funciona Commented el 10 may. 2016 a las 13:39
  • Así, sí. El fallo es lo que me imaginaba: sólo se muestra el modal para los elementos de la primera página de la paginación
    – Alvaro Montoro
    Commented el 10 may. 2016 a las 13:52

3 respuestas 3

4

La solución de @Alvaro Montoro es correctísima. Otra solución que se me ha ocurrido es escuchar el evento draw de la tabla y volver a instanciar el controlador del evento. My fiddle aquí. (Es un poco "chapuza" pero hey functiona!!)

5
  • Muchas gracias por contestar, es buena alternativa, gracias. Commented el 10 may. 2016 a las 14:18
  • Esta solución funciona, pero ve con cuidado: no se comprueba si el botón tiene un evento asociado ya, y entonces se asociará la misma acción una y otra vez cada vez que se dibuje la tabla. Por ejemplo: ve a esta versión modificada de tu JSFiddle, abre la consola de JavaScript, cambia el número de registros de 10 a 25 y de nuevo a 10 varias veces, pulsa en la lupa en cualquiera de las filas, en la consola verás que el mensaje "event" se muestra varias veces (una por cada vez que se asoció el controlador del evento click)
    – Alvaro Montoro
    Commented el 10 may. 2016 a las 14:25
  • De nuevo tienes toda la razón, no caí en ello. La solución por la que he optado es antes de asignar el evento click, eliminar cualquier controlador de este evento con el método off() de jquery. Fiddle : jsfiddle.net/s5w74xe7/5 Commented el 10 may. 2016 a las 14:34
  • Funciona genial :)
    – Alvaro Montoro
    Commented el 10 may. 2016 a las 14:36
  • Es un poco chapuza mi solución. Yo sin duda optaría por la tuya. Mucho más clara y concisa. Gracias por advertirme del error! :-) Commented el 10 may. 2016 a las 14:42
2

El fallo es el siguiente: asocias el controlador del evento click cuando se crea la página:

$('.view_activo').click(function(e) {
  e.preventDefault();
  dialog.dialog('open');
});

Pero al momento de crearse la página sólo hay cierto número de elementos en la tabla (10 en concreto), así que cuando paginas o cambias el número de elementos por página, esos nuevos elementos no tienen ningun controlador de evento asociado.

Para solucionar, utiliza los eventos delegados con .on() y ya te funcionará. Sólo tendrías que cambiar el código de arriba a esto:

$('body').on("click", ".view_activo", function(e) {
  e.preventDefault();
  dialog.dialog('open');
});

Puedes verlo en este JSFiddle: https://jsfiddle.net/s5w74xe7/2/

1
  • ok, muchas gracias, funciono a la perfección. Commented el 10 may. 2016 a las 14:11
0

yo lo hice con botones, mira este es el https://jsfiddle.net/lburgos/8zajd3fe/5/

me sirvió mucho tu ejemplo Álvaro Montoro, gracias por ello, lo pude adaptar a botones, muchas gracias, Dios los bendiga.

             $('body').on("click", "button[id=btnEdit]", function(e) {

            var estado_id       = $(this).data("estado_id");          
           $('#modal-edit').modal('show');

              $("#new_estado_id").val(estado_id);


        });  

 $(function () {
    var table = $('#example1').DataTable({
      'colReorder'  : true,
      'paging'      : true,
      'lengthChange': true,
      'searching'   : true,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : true,
      'order'       : [[ 2, "desc" ]]   
    })
  })

             $('body').on("click", "button[id=btnEdit]", function(e) {

                var estado_id       = $(this).data("estado_id");          
               $('#modal-edit').modal('show');

                  $("#new_estado_id").val(estado_id);
                             
                  
            });   
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.6/b-html5-1.5.6/r-2.2.2/datatables.min.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


</head>
<body>
  
  <table id="example1" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example1_info">
                <thead>
                    <tr role="row">
                      <th >Acciones</th>
                      <th >Usuario</th>
                      <th >Nombre</th>
                      <th >Estado</th>
                    </tr>
                </thead>
                <tbody>
 <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>

                 <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr> <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>

                 <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>

                 <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
 <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>

                 <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>                                                    
                 <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>

                 <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>
                                   <tr >
                    <td class="acciones" align="center">                                        
                        <button class="btn bg-orange btn-xs view_activo" id="btnEdit"   data-estado_id="8">
                            <i class="fa fa-edit"></i>
                        </button>

                    </td>  
                    <td class="usuario">      USER           </td>                             
                    <td class="paciente">     LOREM IPSUM</td>                              
                    <td class="estado"><span class="label label-success">Aprobado</span></td>
                  </tr>                  
                </tbody>
                <tfoot>
        <tr>
          <th>Acciones</th>
          <th>Usuario</th>
          <th>Nombre</th>
          <th>Estado</th>
        </tr>
    </tfoot>
  </table>

<div class="modal fade bs-example-modal-lg" id="modal-edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog ">
                <div class="modal-content">  
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          
                        <div class="col-xs-12 col-md-12">
                            <div class="form-group">
                                <h4 class="modal-title" id="gridSystemModalLabel"><u>Datos</u></h4>    
                            </div>

                        </div>

                </div>                                
                <div class="modal-body">
                    
              
                        
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                              <label>Estado</label>
                              <div class='input-group'>
                                <select id="new_estado_id" class="form-control">

                                          <option value="2">Estado 2</option>
                                          <option value="4">Estado 4</option>
                                          <option value="6">Estado 6</option>
                                          <option value="8">Estado 8</option>

                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-scale"></span>
                                </span> 
                                </select>                             
                              </div>
                            </div>
                        </div>


                        <div class="col-md-6 col-sm-6">    
                            <div class="form-group">
                              <label>Nombre</label> 
                              <div class='input-group'>
                                <input type="text" class="form-control" id="new_nombre" placeholder="nombre">
                                <span class="input-group-addon">
                                    <span class="fa fa-medkit"></span>
                                </span>                             
                              </div>
                            </div>   
                        </div>   
                  
                                                     
                    
                </div>
                    
                <div class="modal-footer">
                    <input type="hidden" id="id_registro" value="">
                  <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> Cerrar</button>
                  <button type="button" class="btn btn-primary" id="updateEstadoCarta">Actualizar</button>
                </div>                                
                </div>
              </div>
            </div>   

              
              <!-- 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 type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.3/b-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.js"></script>

</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.