Quiero crear «CRUD» funciones llamando a un formulario modal haciendo clic en una fila de tablas de datos.

He estado en esto durante horas recorriendo a través de cada paso de mi código y parece que me estoy poniendo un conflicto entre mi JQ-interfaz de usuario y tablas de datos. He encontrado varios ejemplos, incluyendo las tablas de datos de ejemplo para «en vivo» de las funciones, donde se puede inicializar una tabla y llamar a una simple función jquery.

Estoy usando:

  • code.jquery.com/jquery-1.9.1.js
  • code.jquery.com/ui/1.10.2/jquery-ui.js
  • ../DataTables-1.9.4/media/js/jquery.dataTables.js

Este ejemplo me va a dar el cursor y, a continuación, hace que la tabla de «saltar» a través de la página.
¿Alguien tiene un ejemplo de trabajo o un violín puedo experimentar con?

function openDialog() {
    $("#dialog-modal").dialog({
        height: 140,
        modal: true
    });
}

/* Init DataTables */
$('#example').dataTable();

/* Add events */
$('#example tbody tr').on('click', function () {

    $('#example tbody tr').css('cursor', 'pointer');
    var sTitle;
    var nTds = $('td', this);
    var sBrowser = $(nTds[1]).text();
    var sGrade = $(nTds[4]).text();
    /*
    if (sGrade == "A")
        sTitle = sBrowser + ' will provide a first class (A) level of CSS support.';
    else if (sGrade == "C")
        sTitle = sBrowser + ' will provide a core (C) level of CSS support.';
    else if (sGrade == "X")
        sTitle = sBrowser + ' does not provide CSS support or has a broken implementation. Block CSS.';
    else
        sTitle = sBrowser + ' will provide an undefined level of CSS support.';
     */
    openDialog();

    //alert( sTitle )
});
  • Esto parece ser un problema más complejo que puede ser analizado sólo con la publicación de un fragmento de la secuencia de comandos. Podría crear un jsFiddle, por favor?
InformationsquelleAutor zzipper72 | 2013-07-06

1 Comentario

  1. 6

    Un poco de sueño y otra puñalada en esto dio como resultado una solución que al menos resuelve el Datatable de Diálogo problema, voy a tener que asumir que cualquier otro de los problemas que estaba teniendo encuentra los otros complementos que he incluido. Así que para mí esto es resuelto.

    La respuesta fue de un 99% en este post – gracias a la autora por el gran ejemplo de trabajo.

    He modificado su vínculo solución, combinada con tablas de datos «en vivo» ejemplo de solución con variables, y fue capaz de pasar con éxito los datos para un trabajo de diálogo que trabaja con la paginación como la del enlace anterior explica.

    Esto me permitiría crear JQuery-UI Formularios Modales, pasar el ID de mySQL columna de la tabla, y ejecutar el formulario que entrega el Lado del Servidor PHP CRUD funciones que necesitaba.

    (No puedo tomar el crédito para cualquier parte de este, que no sea el tiempo pasó, asegurándose de que se trabajó).

    El ejemplo está tomado directamente de las tablas de datos «eventos en vivo» ejemplo, debería ser fácil si usted quitar el sAjaxsource e ir con un simple Datatable..

      $('#example').dataTable( {
                    "bProcessing": true,
                    "bServerSide": true,
                    "bJQueryUI": true,
                    "bStateSave": true,
                    "sPaginationType": "full_numbers",
                    "sAjaxSource": " /*your data source page here*/"           
                } );
    
                 /* Add events */
                $("body").on("click", "#example tbody tr", function (e) {
                     e.preventDefault();                    
    
                    var nTds = $('td', this);
                    //example to show any cell data can be gathered, I used to get my ID from the first coumn in my final code
                    var sBrowser = $(nTds[1]).text();
                    var sGrade = $(nTds[4]).text();
                    var dialogText="The info cell I need was in (col2) as:"+sBrowser+" and in (col5) as:"+sGrade+"" ;
                    var targetUrl = $(this).attr("href");
    
                    $('#table-dialog').dialog({
                      buttons: {
                        "Delete": function() {
                            window.location.href = targetUrl;
                        },
                        "Cancel": function() {
                          $(this).dialog("close");
                        }
                      }
                    });                 
                    //simple dialog example here
                    $('#table-dialog').text(dialogText ).dialog("open");                
                });
    • Esto me ayudará mucho.

Dejar respuesta

Please enter your comment!
Please enter your name here