JQUERY POST AJAX JSON MOSTAR TABLA HTML DOM JS

https://www.studentstutorial.com/ajax/crud?expand_article=1

https://codeanddeploy.com/blog/php/ajax-search-data-in-php-mysql-using-jquery


function all() 

{

// Ajax config

$.ajax({

        type: "GET", //we are using GET method to get all record from the server

        url: 'all.php', // get the route value

        beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click

            ajaxLoader("#employees-list", "show");

        },

        success: function (response) {//once the request successfully process to the server side it will return result here

            

            // Parse the json result

        response = JSON.parse(response);


            var html = "";

            // Check if there is available records

            if(response.length) {

            html += '<div class="list-group">';

            // Loop the parsed JSON

            $.each(response, function(key,value) {

            // Our employee list template

html += '<a href="#" class="list-group-item list-group-item-action">';

html += "<p>" + value.first_name +' '+ value.last_name + " <span class='list-email'>(" + value.email + ")</span>" + "</p>";

html += "<p class='list-address'>" + value.address + "</p>";

html += "<button class='btn btn-sm btn-primary mt-2' data-toggle='modal' data-target='#edit-employee-modal' data-id='"+value.id+"'>Edit</button>";

html += "<button class='btn btn-sm btn-danger mt-2 ml-2 btn-delete-employee' data-id='"+value.id+"' typle='button'>Delete</button>";

html += '</a>';

            });

            html += '</div>';

            } else {

            html += '<div class="alert alert-warning">';

  html += 'No records found!';

html += '</div>';

            }


            // Insert the HTML Template and display all employee records

$("#employees-list").html(html);

        },

        complete: function() {

        ajaxLoader("#employees-list", "hide");

        }

    });

}


///////////////////////////////////////////


html += '<div class="list-group">';

            // Loop the parsed JSON

            $.each(response, function(key,value) {

            // Our employee list template

html += '<a href="#" class="list-group-item list-group-item-action">';

html += "<p>" + value.first_name +' '+ value.last_name + " <span class='list-email'>(" + value.email + ")</span>" + "</p>";

html += "<p class='list-address'>" + value.address + "</p>";

html += "<button class='btn btn-sm btn-primary mt-2' data-toggle='modal' data-target='#edit-employee-modal' data-id='"+value.id+"'>Edit</button>";

html += "<button class='btn btn-sm btn-danger mt-2 ml-2 btn-delete-employee' data-id='"+value.id+"' typle='button'>Delete</button>";

html += '</a>';

            });

            html += '</div>';

            } else {

            html += '<div class="alert alert-warning">';

  html += 'No records found!';

html += '</div>';

            }


            // Insert the HTML Template and display all employee records

$("#employees-list").html(html);

Comentarios

Publicar un comentario

Entradas populares de este blog

NUMEROS SERIE DE DISCO RIGIDO Y PENDRIVER USB CON PHP

 Para listar todos los dispositivos USB conectados y obtener su número de serie en PHP usando wmic, necesitas ajustar el comando wmic. El comando que tienes está intentando filtrar las unidades basadas en una letra de unidad, lo cual no funcionará para todos los dispositivos USB. En su lugar, puedes usar el siguiente enfoque:     Usa wmic diskdrive para obtener todos los dispositivos conectados, y luego puedes filtrarlos por MediaType o DeviceID para identificar cuáles son dispositivos USB. Aquí tienes el código corregido: php // Ejecutar el comando para listar todas las unidades de disco, incluyendo USB $output2 = shell_exec('wmic diskdrive where "MediaType=\'Removable Media\'" get DeviceID,SerialNumber,Model'); // Ver la salida completa (para depuración) echo "<pre>$output2</pre>"; Explicación:     wmic diskdrive where "MediaType='Removable Media'" get DeviceID,SerialNumber,Model: Este comando obtiene todas las unidade...
Leer más

INSERTAR Y UPDATE FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE

COMO INSERTAR FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE ChatGPT Para insertar una fecha con PHP y MySQL en un formulario usando el método POST con jQuery y la etiqueta date, puedes seguir estos pasos. Asumiré que estás utilizando un formulario HTML con un campo de fecha: Crear el formulario HTML: html Copy code <!DOCTYPE html> <html lang="es"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Formulario de Fecha</title>     <!-- Agregar jQuery -->     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> </head> <body>     <form id="miFormulario">         <label for="fecha">Fecha:</label>         <input type="date" id="fecha" name="fecha" required>         <but...
Leer más

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

  Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6   Para crear una copia de seguridad de un archivo MS Access (.mdb) a un pendrive cuando se hace clic en un botón en un formulario VB6, puedes usar el siguiente código: vb Private Sub cmdBackup_Click ()     On Error GoTo ErrorHandler         Dim ArchivoOrigen As String     Dim ArchivoDestino As String     Dim UnidadPendrive As String     Dim FSO As Object     Dim Drv As Object     Dim Existe As Boolean         ' Ruta del archivo de origen (base de datos Access)     ArchivoOrigen = "C:\Ruta\A\Tu\BaseDeDatos.mdb" ' Cambiar por tu ruta real         ' Verificar si el archivo de origen existe     If Dir(ArchivoOrigen) = "" Then         Ms...
Leer más