Eliminar múltiples registros DataTables: Ejemplo completo

Eliminar múltiples registros DataTables. En este artículo veremos el uso de un plugin llamado DataTables. Por lo tanto, este plugin, es la forma más fácil de agregar paginación en la página con todas las características requeridas para el usuario final.

El objetivo del plugin DataTables es «Mejorar la accesibilidad de los datos en las tablas HTML«. Para lograr esto, debemos de vincular el plugin con HTML, PHP y MySQL.

Eliminar múltiples registros DataTables: Opciones DataTables

Las opciones que posee este plugin son los siguientes.

• Tablas con elementos adicionales y opciones de personalización
• Tablas con botones, casillas de verificación, iconos, paneles y más.
• Tabla Responsiva.- Opciones avanzadas para tablas adaptables
• Paginación.- Es un método de navegación simple que le permite dividir una gran cantidad de contenido dentro de las tablas en partes más pequeñas.
• Búsqueda.- El cuadro de búsqueda permite la búsqueda súper rápida entre todos los datos de la tabla.

¿Cómo funciona el Script?

Principalmente como dice el título de la entrada «eliminación múltiple usando DataTables«, debemos de agregar el control “delete” y agregar el botón de eliminación con cada registro o agregar casillas de verificación y un solo botón de eliminación.

Este ejemplo muestra, cómo seleccionar una, varias y/o todas las casillas de verificación para después eliminarlo haciendo un clic en un botón usando DataTables con jQuery  y AJAX simultáneamente.

Estructura: Eliminar múltiples registros DataTables

El presente script posee la siguiente estructura de archivos incluido el plugin DataTables, veamos a continuación.

Eliminar múltiples registros DataTables: Procesos

Ahora vamos a proceder con los procesos y la implementación del Script «borrar múltiples registros DataTables«.

Primer paso: Crear tabla personal

Este ejercicio para que funcione correctamente necesita una base de datos en MySQL (php_datatables.sql), con su respectiva tabla que tendrá como nombre «personal«. Esta tabla, estará encargada de almacenar la información que posteriormente borraremos.

CREATE TABLE `personal` (
  `id` int(11) NOT NULL,
  `nom_personal` varchar(120) DEFAULT NULL,
  `salario` varchar(20) DEFAULT NULL,
  `genero` varchar(100) DEFAULT NULL,
  `ciudad` varchar(100) DEFAULT NULL,
  `email` varchar(100) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


INSERT INTO `personal` (`id`, `nom_personal`, `salario`, `genero`, `ciudad`, `email`) VALUES
(1, 'Carlos', '30000', 'Hombre', 'Bogota', 'cvbcarlos@gmail.com'),
(2, 'Luis', '28000', 'Hombre', 'Lima', 'cvbluis@gmail.com'),
(3, 'Valeria', '35000', 'Mujer', 'Santiago', 'cvbvaleria@yahoo.com'),
(4, 'Raul', '25000', 'Hombre', 'Quito', 'cvbraul@gmail.com'),
(5, 'Soraida', '50000', 'Mujer', 'Asuncion', 'cvbsoraida@gmail.com'),
(6, 'Bianca', '48000', 'Mujer', 'Canarias', 'cvbbianca@yahoo.com'),
(7, 'Lucia', '36000', 'Mujer', 'Montevideo', 'cvblucia@gmail.com'),
(8, 'Anel', '32000', 'Mujer', 'La Paz', 'cvbanel@gmail.com'),
(10, 'Mario', '52000', 'Hombre', 'Ohio', 'cvbmario@yahoo.com'),
(11, 'Daniel', '48000', 'Hombre', 'Caracas', 'cvbdaniel@gmail.com'),
(12, 'Marilyn', '54000', 'Mujer', 'Miami', 'cvbmarilyn@gmail.com'),
(13, 'Martin', '43000', 'mujer', 'Caracas', 'cvbmartin@gmail.com'),
(14, 'Thalia', '32000', 'Mujer', 'Lima', 'cvbthalia@yahoo.com'),
(15, 'Karina', '45000', 'Mujer', 'Chicago', 'cvbkarina@gmail.com'),
(16, 'Maicol', '38000', 'Hombre', 'Los Angeles', 'cvbmaicol@gmail.com'),
(17, 'Rolando', '47000', 'Hombre', 'Bonton', 'cvbrolando@gmail.com'),
(18, 'Estela', '28000', 'Hombre', 'Miami', 'cvbestela@gmail.com'),
(20, 'Venancio', '34000', 'Hombre', 'Chicago', 'cvbvenancio@gmail.com'),
(21, 'Tania', '41000', 'Mujer', 'Ohio', 'cvbtania@gmail.com'),
(22, 'Maricela', '28000', 'Mujer', 'Boston', 'cvbmaricela@gmail.com'),
(23, 'Nikita', '46000', 'Mujer', 'Miami', 'cvbnikita@gmail.com');


ALTER TABLE `personal`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `personal`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=24;

Segundo paso: Configuración

Este paso es muy importante y trata acerca de la conexión de PHP hacia MySQL a través de un archivo llamado «config.php”. Sin embargo, este archivo contendrá las credenciales para realzar la conexión con MySQL.

Las variables que utilizan este fichero son:

a) La variable $host.- Sera el encargado de almacenar el nombre del servidor, en este caso «localhost«.

b) La variable $user.- El nombre de usuario de MySQL

c) La variable $password.- la contraseña asignada al usuario MySQL para acceder a la base de datos.

d) Variable $dbname.- El nombre de la base de datos.

Con estas cuatro variables  PHP se conectara a MySQL de manera satisfactoria usando la función «mysqli_connect«, veamos un ejemplo completo.

Código completo de «config.php»

<?php

$host = "localhost"; /* Nombre del servidor */
$user = "root"; /* Nombre de Usuario BD*/
$password = ""; /* Contraseña de la BD*/
$dbname = "php_datatables"; /* Nombre de la Base de datos */

// Realizamos la conexion a travez de la variable "$con", con 4 parametros.
$con = mysqli_connect($host, $user, $password,$dbname);

// Revisamos la conexión con MySQL
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}
?>

Tercer paso: Incluir plugin DataTables

Este plugin cumple un papel importante en este script porque nos dará las facilidades para poder controlar una tabla y la información extraída de la base de datos. Ahora, veremos algunos pasos para implementar el plugin.

• Descargar el plugin Datatables.
• Incluir los archivos del plugin en la cabecera de nuestro fichero: datatables.min.css y datatables.min.js en la etiqueta <head>  y también incluya jQuery Library para trabajar sin problemas.
• Además, podemos usar CDN para que funcione este plugin.

Ejemplo de implementación del plugin DataTables

<head>
<!-- Datatable CSS -->
<link href='//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>

<!-- jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Datatable JS -->
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>

Cuarto paso: Insertar identificadores

Para que el plugin funcione debemos de insertar identificadores y clases, ejemplo.

<table id="empTable" class="display dataTable">

Como apreciamos, vemos que se incorporó el ID llamado «empTable» y la clase CSS llamado «display dataTable«.

Agregar una fila de encabezado

En la última celda de encabezado, agregaremos la casilla de verificación con la opción «Seleccionar todos los registros» y un botón para eliminar los registros marcados previamente.

<!-- Table -->
<table id="empTable" class="display dataTable">
<thead>
<tr>
    <th>Nombre Personal</th>
    <th>Email</th>
    <th>Genero</th>
    <th>Salario</th>
    <th>Ciudad</th>
<th style="width:60px !important">
<div class="input-group"> <span class="input-group-addon"> 
<input type="checkbox" aria-label="Checkbox" class="checkall" id="checkall"> </span> 
<button type="button" id="delete_record" class="btn btn-danger">Borrar</button> </div>
</th>
</tr>
</thead>
</table>
<!--Fin Datables-->

Quinto paso: Iniciamos el Script

En este proceso ya es el uso de jQuery y Ajax que será el encargado de llamar al archivo PHP llamado «ajaxfile.php«. Sin embargo, al final este archivo PHP tendrá varias funciones como realizar consultas y eliminar registros seleccionados.

Crear la función checkcheckbox()

Esta función cuenta las casillas de verificación totales y las casillas de verificación marcadas con class ‘delete_check‘ en la página donde tenemos la tabla.

Botón Eliminar registros seleccionados

Este botón solo eliminara los registros seleccionados mediante la casilla de verificación.

var dataTable;
$(document).ready(function(){

   // Initialize datatable
   dataTable = $('#empTable').DataTable({
     'processing': true,
     'serverSide': true,
     'serverMethod': 'post',
     'ajax': {
        'url':'ajaxfile.php',
        'data': function(data){
           
           data.request = 1;

        }
     },
     'columns': [
        { data: 'emp_name' },
        { data: 'email' },
        { data: 'gender' },
        { data: 'salary' },
        { data: 'city' },
        { data: 'action' },
     ],
     'columnDefs': [ {
       'targets': [5], // column index (start from 0)
       'orderable': false, // set orderable false for selected columns
     }]
   });

   // Check all 
   $('#checkall').click(function(){
      if($(this).is(':checked')){
         $('.delete_check').prop('checked', true);
      }else{
         $('.delete_check').prop('checked', false);
      }
   });

   // Delete record
   $('#delete_record').click(function(){

      var deleteids_arr = [];
      // Read all checked checkboxes
      $("input:checkbox[class=delete_check]:checked").each(function () {
         deleteids_arr.push($(this).val());
      });

      // Check checkbox checked or not
      if(deleteids_arr.length > 0){

         // Confirm alert
         var confirmdelete = confirm("Do you really want to Delete records?");
         if (confirmdelete == true) {
            $.ajax({
               url: 'ajaxfile.php',
               type: 'post',
               data: {request: 2,deleteids_arr: deleteids_arr},
               success: function(response){
                  dataTable.ajax.reload();
               }
            });
         } 
      }
   });

});

// Checkbox checked
function checkcheckbox(){

   // Total checkboxes
   var length = $('.delete_check').length;

   // Total checked checkboxes
   var totalchecked = 0;
   $('.delete_check').each(function(){
      if($(this).is(':checked')){
         totalchecked+=1;
      }
   });

   // Checked unchecked checkbox
   if(totalchecked == length){
      $("#checkall").prop('checked', true);
   }else{
      $('#checkall').prop('checked', false);
   }
}

Sexto paso: Procesar la información

Para procesar la información necesitamos de un lenguaje con el PHP. Por lo tanto, en este paso usaremos un archivo llamado  «ajaxfile.php«, desde este archivo podemos controlar las solicitudes AJAX.

Usaremos el fichero «config.php» que contiene los datos de conexión con el servidor.

Código completo

<?php
include 'config.php';

$request = $_POST['request'];

// Datatable data
if($request == 1){
    ## Read value
    $draw = $_POST['draw'];
    $row = $_POST['start'];
    $rowperpage = $_POST['length']; // Rows display per page
    $columnIndex = $_POST['order'][0]['column']; // Column index
    $columnName = $_POST['columns'][$columnIndex]['data']; // Column name
    $columnSortOrder = $_POST['order'][0]['dir']; // asc or desc
    $searchValue = $_POST['search']['value']; // Search value

    ## Search 
    $searchQuery = " ";
    if($searchValue != ''){
        $searchQuery .= " and (nom_personal like '%".$searchValue."%' or 
            email like '%".$searchValue."%' or 
            ciudad like'%".$searchValue."%' ) ";
    }

    ## Total number of records without filtering
    $sel = mysqli_query($con,"select count(*) as allcount from personal");
    $records = mysqli_fetch_assoc($sel);
    $totalRecords = $records['allcount'];

    ## Total number of records with filtering
    $sel = mysqli_query($con,"select count(*) as allcount from personal WHERE 1 ".$searchQuery);
    $records = mysqli_fetch_assoc($sel);
    $totalRecordwithFilter = $records['allcount'];

    ## Fetch records
    $empQuery = "select * from personal WHERE 1 ".$searchQuery." order by ".$columnName." ".$columnSortOrder." limit ".$row.",".$rowperpage;
    $empRecords = mysqli_query($con, $empQuery);
    $data = array();

    while ($row = mysqli_fetch_assoc($empRecords)) {
        $data[] = array(
                "nom_personal"=>$row['nom_personal'],
                "email"=>$row['email'],
                "genero"=>$row['genero'],
                "salario"=>$row['salario'],
                "ciudad"=>$row['ciudad'],
                "action"=>"<input type='checkbox' class='delete_check' id='delcheck_".$row['id']."' onclick='checkcheckbox();' value='".$row['id']."'>"
            );
    }

    ## Response
    $response = array(
        "draw" => intval($draw),
        "iTotalRecords" => $totalRecords,
        "iTotalDisplayRecords" => $totalRecordwithFilter,
        "aaData" => $data
    );

    echo json_encode($response);
    exit;
}

// Delete record
if($request == 2){
    $deleteids_arr = $_POST['deleteids_arr'];

    foreach($deleteids_arr as $deleteid){
        mysqli_query($con,"DELETE FROM personal WHERE id=".$deleteid);
    }

    echo 1;
    exit;
}

CONCLUSIÓN: Eliminar múltiples registros DataTables

En este artículo hemos aprendido a implementar un plugin para optimizar nuestros resultados de MySQL. Además, hemos incorporado la función de eliminar registros.

Como han podido apreciar la implementación se puede realizar descargando el plugin e insertar al script o usando CDN para no saturar nuestro servidor.

Espero que esta simple explicación les ayude a usar el plugin DataTables en sus proyectos que estén realizando.

DESCARGA DEL SCRIPT

A continuación les dejaré un vínculo para que descarguen el ejemplo completo más la base de datos.

Eliminar registros DataTables PHP

1 archivo(s) 354.51 KB

Descargar