dudas con tabla dinámica y borrado de registro en html+php+javascript

Hola amigos, me gustaría comentaros una nueva duda que tengo en mi proyecto:

tengo una página para administrar una base de datos, según pulses en una pestaña u otra da de alta un usuario o lista los usuarios y los borra.

la parte del alta lo tengo hecho ya (sin recargo de página con Ajax) y funciona perfectamente.

Mi problema viene cuando quiero hacer lo mismo para borrar (es decir, mostrar una lista actualizada y borrarlo con ajax para no recargar la página).

Estoy perdido ya que hasta ahora al cargar la página llamaba a mysql desde el php para cargar la tabla, pero si creo un nuevo usuario no va a salir en la tabla de borrar (porque los datos son de cuando la página cargó), y tampoco sé cómo borrar el usuario seleccionado (con checkbox) mediante ajax. (<- esto lo conseguí llamando a otro php pero me gustaría que se hiciera por detrás con ajax y sin recargar la página).

No sé si me he explicado muy bien, espero que sí, acepto ayuda, links de tutoriales, recomendaciones o lo que sea porque estoy en blanco xD.

Muchas gracias a todos.
Un saludo.

Hola:

¿Nos podrías mostrar el código y la estructura de la base de datos?

tengo una llamada jquery al pinchar un botón que me va a generar la tabla con los registros que sean en funcion
de un parámetro:

$(document).ready(function(){

$("#deleteGroupTab").click(function () {
   $(".formTab").fadeOut('fast');
   $("#deleteGroup").fadeIn(2000);
   $.ajax({
        type: 'POST',
        url: "list.php",
        dataType: "json",
        data: {tableType: "group"},
        success: function(data){
            groupTable(data);
        }   
});

});

En mi php simplemente hago la sql y si es correcto lo devuelvo así:

...
sql=...
$i = 0;
    while ($result = $sql->fetch_object())
    {
        $jsondata[$i]['groupName'] = $result->groupName;
        $jsondata[$i]['description'] = $result->description;
        $jsondata[$i]['creationDate'] = $result->creationDate;
        $i++;
    }
    echo json_encode($jsondata);

Y mi duda viene ahora, como lo que me ha generado es una matriz [] [] no sé cómo manejar eso en la función success de jquery, ya que cuando devuelve un sólo dato se maneja con data.groupName, pero ahora no sé cómo acceder a ello.
Lo necesito así porque en esa función generaré código html para meter los campos en una tabla, tipo esto:

function groupTable(data){
    var table = '<table border=1 cellpadding=4 cellspacing=0>';
                table += '<tr> <th colspan=5> Grupos </th> <tr>';
                table += '<th> Nombre Grupo </th><th> Descripción </th><th> Fecha creación </th><th> Selección </th> </tr>';
                table += '<tr>';
		...
                $('#groupTable').html( table );
}

cómo manejo en la última función los datos enviados en "data" si lo guardé en json en forma de matriz?
Gracias por tu interés skaparate

Aaaah... json_encode no crea una matriz, crea un objeto de JavaScript (JSON significa JavaScript Object Notation).

Si utilizas Google Chrome, puedes escribir console.log(data); para que veas lo que te devuelve. Luego debes presionar F11 e ir a la pestaña Console para ver todo lo que se muestra (incluso podrás ver errores).

Ahora, lo que yo haría, sería tener un script que lea la base de datos y devuelva el código HTML listo para usarse:

$o = '<table class="groups">
<thead>
  <tr>
    <th>Nombre</th>
    <th>Descripción</th>
    <th>Creación</th>
    <th>Eliminar</th>
    <!-- Aquí pones más columnas -->
  </tr>
</thead><tbody>';

while ($result = $sql->fetch_object()) {
  $o .= "<tr>";
  $o .= "<td>$result->groupName</td>";
  $o .= "<td>$result->description</td>";
  $o .= "<td>$result->creationDate</td>";
  $o .= "<td><input id='delete-group-$result->ID' class='delete-group' type='checkbox' /></td>";
  // REEMPLAZA $result->ID por el nombre de la columna que sea la clave primaria (PRIMARY KEY) y src='imagen.png' por una imagen.
  $o .= "</tr>";
}

$o .= '</tbody></table>';
$o .= '<p><button id='delete-groups'>Eliminar los Grupos seleccionados?</button></p>';

echo $o;

De esta forma no utilizas JavaScript para crear HTML y no sobrecargas el computador del cliente. En jQuery solo faltaría añadir el contenido al contenedor deseado.

Lo que queda es implementar una función que capture los eventos al marcar el checkbox y al hacer clic sobre el botón para eliminar los elementos seleccionados:

var groups = [];

$('#delete-groups').click(function(e) {
  e.preventDefault();

  if(groups.length > 0) {
    // Aquí realizas la llamada a $.ajax(), donde debes pasar el arreglo groups al script que eliminará los grupos.
  } else {
    alert('No hay elementos seleccionados');
  }
});

$('table.groups input.delete-group').live('change', function(e) {
  var id = $(this).attr('id').replace('group-', '');
  console.log('ID del elemento: ' + id);
			
  if($(this).is(':checked')) {
    console.log('Esta marcado');
    groups.push(id);
  } else {
    console.log('No esta marcado');
    for(var i in groups) {
      if(groups[i] == id) {
	groups.splice(i, 1);
	break;
      }
    }
  }
  
  console.log(groups);
});

En el script que procese la eliminación de los grupos, debes tener en cuenta que este debería devolver todos los datos formateados como HTML, de esta forma podrás mostrar los nuevos datos sin recargar :).

Si no entiendes algo me avisas y, antes de que preguntes, el script esta "incompleto" para que pienses cómo resolverlo (yo sé cómo hacerlo, pero quiero que aprendas :P).

Saludos.

PD.: Una última cosa: recuerda reutilizar código. En lugar de crear un script nuevo para mostrar los nuevos datos, deberías inventar una forma de utilizar un único script para mostrar y eliminar los datos, inténtalo.

Hola de nuevo, y ante todo muchísimas gracias por tu atención @skaparate.

La parte de listar la tabla con los grupos ya lo tengo y me funciona bien.

Respecto a la parte de eliminar intenté lo primero pasar un vector igual que se hacía anteriormente en php y no funcionó y por eso pregunté. Luego probé a serializar los datos del formulario que contiene la tabla pero no me funcionaba. Y cuando me respondiste probé con tu forma y me funciona todo a la perfección.

Muchísimas gracias por todo. Volveré a preguntar dudas en el foro, porque mi proyecto va para largo y lo estoy haciendo yo solo. Es una suerte contar con expertos como tú y que además son tan amables [;)]

Saludos.

De nada, para eso estamos :D.

Por cierto, hay un foro llamado PHP Bases de Datos y MySQL en donde puedes plantear preguntas relacionadas al tema. También hay uno de jQuery, otro de Formularios y otro de Scripts.

Suerte con tu proyecto.