jquery DataTables does not allow opening modal dialog after 10 rows

Question

jquery DataTables does not allow opening modal dialog after 10 rows

Navigation

#1 by (4 votes)
#2 by (2 votes)

3

I have a problem when using jquery Datatables , I do not know why it does not allow me to open modal dialogs that are called after row 10, everything works normal in rows 1 - 10 of the table, however I do not know what happens that all the others fail, because in console and chrome network does not show me any error, even the ajax calls I have are executed well, the problem is that modal dialogs do not open , the code that I have is the following:

Call Datatables:

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

Creation html table:

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

Open 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

Here I put the problem in jsfiddle link

javascript jquery datatables

asked by Juan Pinzón 10.05.2016 в 00:44

source

2 answers

4

The solution of @Alvaro Montoro is very correct. Another solution that has occurred to me is to listen to the draw event of the table and re-instantiate the event handler. My fiddle here . (It's a little "botched" but hey functiona!)

answered by 10.05.2016 в 16:14

c # Pub-Sub pattern Put a default content in JSP layout

score 2 · Accepted Answer

The failure is as follows: you associate the event handler click when the page is created:

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

But at the time the page is created there are only a certain number of elements in the table (10 in particular), so when you change or change the number of elements per page, those new elements do not have any associated event handlers.

To solve, use the delegated events with .on() and it will work for you. You just have to change the code above to this:

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

You can see it in this JSFiddle: link