Wayne  Richards

Wayne Richards

1656656900

Agregar Editar, Eliminar En La Paginación AJAX De DataTables Con PHP

Con el uso del complemento jQuery de DataTables, puede enumerar sus registros en formato de paginación.

Puede agregar elementos HTML como botones, enlaces, imágenes, etc. con un registro.

Para ello, es necesario pasar el elemento en formato de cadena HTML desde el script PHP.

En este tutorial, muestro cómo puede agregar botones de edición y eliminación en la paginación AJAX de Datatables con PHP.

NOTA: estoy usando el modal Bootstrap para actualizar un registro.


1. Estructura de la mesa

Cree usersuna tabla y agregué algunos registros.

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `name` varchar(80) NOT NULL, 
  `gender` varchar(10) NOT NULL,
  `city` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. Configuración

Cree un config.phppara la conexión de la base de datos.

Código completado

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3. Descargar e incluir

  • Descarga Datatables desde aquí y Bootstrap desde aquí .
  • Incluya  datatables.min.css, bootstrap.min.css, la biblioteca jQuery bootstrap.min.js, y datatables.min.jsen la <head>sección.
  • También puede utilizar CDN.
<!-- Datatable CSS -->
<link href='//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >

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

<!-- Bootstrap CSS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>

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

4.HTML

Crear <div id="updateModal" >modal para actualizar los detalles del usuario. Creó un campo oculto para almacenar la identificación de usuario de edición y <button id="btn_save">actualizar el usuario al hacer clic.

Mostrar la lista de usuarios en <table id='userTable' >. En la última columna, muestra el botón editar y eliminar.

Código completado

<!doctype html>
<html>
<head>
   <title>Edit delete DataTables record with AJAX and PHP</title>

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- Datatable CSS -->
   <link href='DataTables/datatables.min.css' rel='stylesheet' type='text/css'>

   <!-- Bootstrap CSS -->
   <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

   <!-- jQuery Library -->
   <script src="jquery-3.5.1.min.js"></script>

   <!-- Bootstrap JS -->
   <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

   <!-- Datatable JS -->
   <script src="DataTables/datatables.min.js"></script>

</head>
<body >

   <div class='container'>

     <!-- Modal -->
     <div id="updateModal" class="modal fade" role="dialog">
       <div class="modal-dialog">

         <!-- Modal content-->
         <div class="modal-content">
           <div class="modal-header">
             <h4 class="modal-title">Update</h4>
             <button type="button" class="close" data-dismiss="modal">&times;</button> 
           </div>
           <div class="modal-body">
             <div class="form-group">
               <label for="name" >Name</label>
               <input type="text" class="form-control" id="name" placeholder="Enter name" required> 
             </div>
             <div class="form-group">
               <label for="email" >Email</label> 
               <input type="email" class="form-control" id="email" placeholder="Enter email"> 
             </div> 
             <div class="form-group">
               <label for="gender" >Gender</label>
               <select id='gender' class="form-control">
                 <option value='male'>Male</option>
                 <option value='female'>Female</option>
               </select> 
             </div> 
             <div class="form-group">
               <label for="city" >City</label> 
               <input type="text" class="form-control" id="city" placeholder="Enter city"> 
             </div>

           </div>
           <div class="modal-footer">
             <input type="hidden" id="txt_userid" value="0">
             <button type="button" class="btn btn-success btn-sm" id="btn_save">Save</button>
             <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
           </div>
         </div>

       </div>
     </div>

     <!-- Table -->
     <table id='userTable' class='display dataTable' width='100%'>
       <thead>
         <tr>
           <th>Name</th>
           <th>Email</th>
           <th>Gender</th>
           <th>City</th>
           <th>Action</th>
         </tr>
       </thead>
     </table>

   </div>

</body>
</html>

5. PHP

Cree un ajaxfile.phparchivo para manejar solicitudes AJAX.

Manejar 4 solicitudes –

If $request == 1 – Devuelve la respuesta de DataTable.

Lea los valores POST de DataTable y asígnelos en variables.

Si $searchno está vacío, prepare la consulta de búsqueda y asígnela en $searchQueryla variable.

Contar registros totales con y sin filtro de búsqueda y asignar en variables. Obtener registros de  users la tabla donde se pasa  $searchQuery la  WHERE cláusula y especificar  ORDER BY y  LIMIT.

Bucle en los registros obtenidos. Muestra los botones de actualización y eliminación en DataTable usando una cadena HTML.

  • Cree un botón de actualización y asígnelo en $updateButton. En el botón, agregue la 'updateUser'clase y use data-idel atributo para almacenar la identificación del usuario. Agregar data-toggley data-targetatribuir para abrir #updateModalmodal.
  • Del mismo modo, cree el botón Eliminar y asígnelo en $deleteButton. En el botón, agregue la 'deleteUser'clase y use data-idel atributo para almacenar la identificación del usuario.

Concat $updateButtony $deleteButtony asignar en $actionvariable.

Inicialice  $responseArray con los valores requeridos. Toma, pasa la $actionclave de 'action'entrada.

Retorna $responseArray en formato JSON.

If $request == 2 – Devuelve los detalles del usuario por id.

Asignar $_POST['id']a $idvariable. Obtener un registro de la userstabla por id. Si el número de registros obtenidos es mayor que 0, lea los valores de campo e inicialice $responseArray. Devuelve un Array en formato JSON que contiene array("status" => 1,"data" => $response).

Si el número de registros obtenidos es 0, devuelva una matriz en formato JSON que contenga array("status" => 1).

If $request == 3 – Actualizar valores de campo por id.

Asignar $_POST['id']a $idvariable. Si $ides mayor que 0, lea el valor POST y asigne una variable.

Compruebe si $idexiste en la userstabla. Si existe, verifique si las variables no están vacías, luego actualice un registro por id y devuelva Array en formato JSON. La matriz contiene array("status" => 1,"message" => "Record updated."). Si las variables están vacías, regresa array("status" => 0,"message" => "Please fill all fields.")en formato JSON.

Si $idno existe, regrese array("status" => 0,"message" => "Invalid ID.")en formato JSON.

If $request == 4 – Eliminar un registro por id.

Asignar $_POST['id']a $idvariable. Si $ides mayor que 0, lea el valor POST y asigne una variable.

Compruebe si $idexiste en la userstabla. Si existe, elimine un registro de la userstabla por id y devuelva 1; de lo contrario, devuelva 0.

Código completado

<?php
include 'config.php';

$request = 1;
if(isset($_POST['request'])){
   $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 = mysqli_escape_string($con,$_POST['search']['value']); // Search value

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

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

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

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

   while ($row = mysqli_fetch_assoc($empRecords)) {

     // Update Button
     $updateButton = "<button class='btn btn-sm btn-info updateUser' data-id='".$row['id']."' data-toggle='modal' data-target='#updateModal' >Update</button>";

     // Delete Button
     $deleteButton = "<button class='btn btn-sm btn-danger deleteUser' data-id='".$row['id']."'>Delete</button>";

     $action = $updateButton." ".$deleteButton;

     $data[] = array(
       "name" => $row['name'],
       "email" => $row['email'],
       "gender" => $row['gender'],
       "city" => $row['city'],
       "action" => $action
     );
   }

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

   echo json_encode($response);
   exit;
}

// Fetch user details
if($request == 2){
   $id = 0;

   if(isset($_POST['id'])){
      $id = mysqli_escape_string($con,$_POST['id']);
   }

   $record = mysqli_query($con,"SELECT * FROM users WHERE id=".$id);

   $response = array();

   if(mysqli_num_rows($record) > 0){
      $row = mysqli_fetch_assoc($record);
      $response = array(
         "name" => $row['name'],
         "email" => $row['email'],
         "gender" => $row['gender'],
         "city" => $row['city'],
      );

      echo json_encode( array("status" => 1,"data" => $response) );
      exit;
   }else{
      echo json_encode( array("status" => 0) );
      exit;
   }
}

// Update user
if($request == 3){
   $id = 0;

   if(isset($_POST['id'])){
      $id = mysqli_escape_string($con,$_POST['id']);
   }

   // Check id
   $record = mysqli_query($con,"SELECT id FROM users WHERE id=".$id);
   if(mysqli_num_rows($record) > 0){
 
      $name = mysqli_escape_string($con,trim($_POST['name']));
      $email = mysqli_escape_string($con,trim($_POST['email']));
      $gender = mysqli_escape_string($con,trim($_POST['gender']));
      $city = mysqli_escape_string($con,trim($_POST['city']));

      if( $name != '' && $email != '' && $gender != '' && $city != '' ){

         mysqli_query($con,"UPDATE users SET name='".$name."',email='".$email."',gender='".$gender."',city='".$city."' WHERE id=".$id);

         echo json_encode( array("status" => 1,"message" => "Record updated.") );
         exit;
      }else{
         echo json_encode( array("status" => 0,"message" => "Please fill all fields.") );
         exit;
      }

   }else{
      echo json_encode( array("status" => 0,"message" => "Invalid ID.") );
      exit;
   }
}

// Delete User
if($request == 4){
   $id = 0;

   if(isset($_POST['id'])){
      $id = mysqli_escape_string($con,$_POST['id']);
   }

   // Check id
   $record = mysqli_query($con,"SELECT id FROM users WHERE id=".$id);
   if(mysqli_num_rows($record) > 0){

      mysqli_query($con,"DELETE FROM users WHERE id=".$id);

      echo 1;
      exit;
   }else{
      echo 0;
      exit;
   }
}

6. jQuery

Inicializar tablas de datos

Inicializar DataTables en #userTabley asignar a userDataTable. establecer processing: true, serverSide: true, serverMethod: 'post'_ Especifique la URL de AJAX con la 'ajax'opción.

Con 'columns'la opción especifica los nombres de las claves que deben leerse de la respuesta de AJAX.

Actualizar usuario

Definir clickevento en .updateUserclase. Lea la identificación de usuario del data-idatributo y asigne a la idvariable. Actualizar valor de #txt_userid.

Envíe la solicitud AJAX POST al 'ajaxfile.php'archivo. Pasa {request: 2, id: id}, listo dataType: 'json'.
En la devolución de llamada exitosa, verifique si response.status == 1o no. Si es igual, lea los valores response.datay actualice el valor de los elementos de entrada modales de Bootstrap.

Definir clickevento en #btn_save. Lea la identificación de edición #txt_useridy asigne en la variable de identificación. Del mismo modo, lea el nombre, el correo electrónico, el género y la ciudad de los elementos de entrada y asígnelos en las variables.

Si los valores no están vacíos, envíe la solicitud AJAX POST al 'ajaxfile.php'archivo. Pasar {request: 3, id: id,name: name, email: email, gender: gender, city: city}como data. establecer dataType: 'json'_

En la devolución de llamada exitosa, verifique si response.status == 1o no. Si es igual entonces alert(response.message)y restablece el valor de los elementos de entrada.

Vuelva a cargar Datatable llamando userDataTable.ajax.reload()y alternando el #updateModalmodal.

Borrar usuario

Definir clickevento en .deleteUserclase. Leer eliminar ID de usuario del data-idatributo. Muestra el mensaje de alerta de confirmación. Si deleteConfirm == trueluego envía una solicitud AJAX POST al 'ajaxfile.php'archivo. Pasar {request: 4, id: id}como data.

En una devolución de llamada exitosa alert("Record deleted.")si response == 1y vuelve a cargar Datatable llamando a userDataTable.ajax.reload().

Código completado

$(document).ready(function(){

  // DataTable
  var userDataTable = $('#userTable').DataTable({
     'processing': true,
     'serverSide': true,
     'serverMethod': 'post',
     'ajax': {
        'url':'ajaxfile.php'
     },
     'columns': [
        { data: 'name' },
        { data: 'email' },
        { data: 'gender' },
        { data: 'city' },
        { data: 'action' },
     ]
  });

  // Update record
  $('#userTable').on('click','.updateUser',function(){
     var id = $(this).data('id');

     $('#txt_userid').val(id);

     // AJAX request
     $.ajax({
        url: 'ajaxfile.php',
        type: 'post',
        data: {request: 2, id: id},
        dataType: 'json',
        success: function(response){
           if(response.status == 1){

             $('#name').val(response.data.name);
             $('#email').val(response.data.email);
             $('#gender').val(response.data.gender);
             $('#city').val(response.data.city);

             userDataTable.ajax.reload();
           }else{
             alert("Invalid ID.");
           }
        }
     });

  });

  // Save user 
  $('#btn_save').click(function(){
     var id = $('#txt_userid').val();

     var name = $('#name').val().trim();
     var email = $('#email').val().trim();
     var gender = $('#gender').val().trim();
     var city = $('#city').val().trim();

     if(name !='' && email != '' && city != ''){

       // AJAX request
       $.ajax({
         url: 'ajaxfile.php',
         type: 'post',
         data: {request: 3, id: id,name: name, email: email, gender: gender, city: city},
         dataType: 'json',
         success: function(response){
            if(response.status == 1){
               alert(response.message);

               // Empty and reset the values
               $('#name','#email','#city').val('');
               $('#gender').val('male');
               $('#txt_userid').val(0);

               // Reload DataTable
               userDataTable.ajax.reload();

               // Close modal
               $('#updateModal').modal('toggle');
            }else{
               alert(response.message);
            }
         }
      });

    }else{
       alert('Please fill all fields.');
    }
  });

  // Delete record
  $('#userTable').on('click','.deleteUser',function(){
     var id = $(this).data('id');

     var deleteConfirm = confirm("Are you sure?");
     if (deleteConfirm == true) {
        // AJAX request
        $.ajax({
          url: 'ajaxfile.php',
          type: 'post',
          data: {request: 4, id: id},
          success: function(response){
             if(response == 1){
                alert("Record deleted.");

                // Reload DataTable
                userDataTable.ajax.reload();
             }else{
                alert("Invalid ID.");
             }
          }
        });
     } 

  });
});

7. Salida

Ver salida


8. Conclusión

En este ejemplo, he agregado botones en DataTables, pero de manera similar puede agregar otros elementos HTML como: etiqueta de anclaje, imagen, casilla de verificación, etc.

Fuente:  https://makitweb.com

#php #ajax 

What is GEEK

Buddha Community

Agregar Editar, Eliminar En La Paginación AJAX De DataTables Con PHP
Wayne  Richards

Wayne Richards

1656656900

Agregar Editar, Eliminar En La Paginación AJAX De DataTables Con PHP

Con el uso del complemento jQuery de DataTables, puede enumerar sus registros en formato de paginación.

Puede agregar elementos HTML como botones, enlaces, imágenes, etc. con un registro.

Para ello, es necesario pasar el elemento en formato de cadena HTML desde el script PHP.

En este tutorial, muestro cómo puede agregar botones de edición y eliminación en la paginación AJAX de Datatables con PHP.

NOTA: estoy usando el modal Bootstrap para actualizar un registro.


1. Estructura de la mesa

Cree usersuna tabla y agregué algunos registros.

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `name` varchar(80) NOT NULL, 
  `gender` varchar(10) NOT NULL,
  `city` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. Configuración

Cree un config.phppara la conexión de la base de datos.

Código completado

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3. Descargar e incluir

  • Descarga Datatables desde aquí y Bootstrap desde aquí .
  • Incluya  datatables.min.css, bootstrap.min.css, la biblioteca jQuery bootstrap.min.js, y datatables.min.jsen la <head>sección.
  • También puede utilizar CDN.
<!-- Datatable CSS -->
<link href='//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >

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

<!-- Bootstrap CSS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>

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

4.HTML

Crear <div id="updateModal" >modal para actualizar los detalles del usuario. Creó un campo oculto para almacenar la identificación de usuario de edición y <button id="btn_save">actualizar el usuario al hacer clic.

Mostrar la lista de usuarios en <table id='userTable' >. En la última columna, muestra el botón editar y eliminar.

Código completado

<!doctype html>
<html>
<head>
   <title>Edit delete DataTables record with AJAX and PHP</title>

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- Datatable CSS -->
   <link href='DataTables/datatables.min.css' rel='stylesheet' type='text/css'>

   <!-- Bootstrap CSS -->
   <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

   <!-- jQuery Library -->
   <script src="jquery-3.5.1.min.js"></script>

   <!-- Bootstrap JS -->
   <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

   <!-- Datatable JS -->
   <script src="DataTables/datatables.min.js"></script>

</head>
<body >

   <div class='container'>

     <!-- Modal -->
     <div id="updateModal" class="modal fade" role="dialog">
       <div class="modal-dialog">

         <!-- Modal content-->
         <div class="modal-content">
           <div class="modal-header">
             <h4 class="modal-title">Update</h4>
             <button type="button" class="close" data-dismiss="modal">&times;</button> 
           </div>
           <div class="modal-body">
             <div class="form-group">
               <label for="name" >Name</label>
               <input type="text" class="form-control" id="name" placeholder="Enter name" required> 
             </div>
             <div class="form-group">
               <label for="email" >Email</label> 
               <input type="email" class="form-control" id="email" placeholder="Enter email"> 
             </div> 
             <div class="form-group">
               <label for="gender" >Gender</label>
               <select id='gender' class="form-control">
                 <option value='male'>Male</option>
                 <option value='female'>Female</option>
               </select> 
             </div> 
             <div class="form-group">
               <label for="city" >City</label> 
               <input type="text" class="form-control" id="city" placeholder="Enter city"> 
             </div>

           </div>
           <div class="modal-footer">
             <input type="hidden" id="txt_userid" value="0">
             <button type="button" class="btn btn-success btn-sm" id="btn_save">Save</button>
             <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
           </div>
         </div>

       </div>
     </div>

     <!-- Table -->
     <table id='userTable' class='display dataTable' width='100%'>
       <thead>
         <tr>
           <th>Name</th>
           <th>Email</th>
           <th>Gender</th>
           <th>City</th>
           <th>Action</th>
         </tr>
       </thead>
     </table>

   </div>

</body>
</html>

5. PHP

Cree un ajaxfile.phparchivo para manejar solicitudes AJAX.

Manejar 4 solicitudes –

If $request == 1 – Devuelve la respuesta de DataTable.

Lea los valores POST de DataTable y asígnelos en variables.

Si $searchno está vacío, prepare la consulta de búsqueda y asígnela en $searchQueryla variable.

Contar registros totales con y sin filtro de búsqueda y asignar en variables. Obtener registros de  users la tabla donde se pasa  $searchQuery la  WHERE cláusula y especificar  ORDER BY y  LIMIT.

Bucle en los registros obtenidos. Muestra los botones de actualización y eliminación en DataTable usando una cadena HTML.

  • Cree un botón de actualización y asígnelo en $updateButton. En el botón, agregue la 'updateUser'clase y use data-idel atributo para almacenar la identificación del usuario. Agregar data-toggley data-targetatribuir para abrir #updateModalmodal.
  • Del mismo modo, cree el botón Eliminar y asígnelo en $deleteButton. En el botón, agregue la 'deleteUser'clase y use data-idel atributo para almacenar la identificación del usuario.

Concat $updateButtony $deleteButtony asignar en $actionvariable.

Inicialice  $responseArray con los valores requeridos. Toma, pasa la $actionclave de 'action'entrada.

Retorna $responseArray en formato JSON.

If $request == 2 – Devuelve los detalles del usuario por id.

Asignar $_POST['id']a $idvariable. Obtener un registro de la userstabla por id. Si el número de registros obtenidos es mayor que 0, lea los valores de campo e inicialice $responseArray. Devuelve un Array en formato JSON que contiene array("status" => 1,"data" => $response).

Si el número de registros obtenidos es 0, devuelva una matriz en formato JSON que contenga array("status" => 1).

If $request == 3 – Actualizar valores de campo por id.

Asignar $_POST['id']a $idvariable. Si $ides mayor que 0, lea el valor POST y asigne una variable.

Compruebe si $idexiste en la userstabla. Si existe, verifique si las variables no están vacías, luego actualice un registro por id y devuelva Array en formato JSON. La matriz contiene array("status" => 1,"message" => "Record updated."). Si las variables están vacías, regresa array("status" => 0,"message" => "Please fill all fields.")en formato JSON.

Si $idno existe, regrese array("status" => 0,"message" => "Invalid ID.")en formato JSON.

If $request == 4 – Eliminar un registro por id.

Asignar $_POST['id']a $idvariable. Si $ides mayor que 0, lea el valor POST y asigne una variable.

Compruebe si $idexiste en la userstabla. Si existe, elimine un registro de la userstabla por id y devuelva 1; de lo contrario, devuelva 0.

Código completado

<?php
include 'config.php';

$request = 1;
if(isset($_POST['request'])){
   $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 = mysqli_escape_string($con,$_POST['search']['value']); // Search value

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

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

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

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

   while ($row = mysqli_fetch_assoc($empRecords)) {

     // Update Button
     $updateButton = "<button class='btn btn-sm btn-info updateUser' data-id='".$row['id']."' data-toggle='modal' data-target='#updateModal' >Update</button>";

     // Delete Button
     $deleteButton = "<button class='btn btn-sm btn-danger deleteUser' data-id='".$row['id']."'>Delete</button>";

     $action = $updateButton." ".$deleteButton;

     $data[] = array(
       "name" => $row['name'],
       "email" => $row['email'],
       "gender" => $row['gender'],
       "city" => $row['city'],
       "action" => $action
     );
   }

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

   echo json_encode($response);
   exit;
}

// Fetch user details
if($request == 2){
   $id = 0;

   if(isset($_POST['id'])){
      $id = mysqli_escape_string($con,$_POST['id']);
   }

   $record = mysqli_query($con,"SELECT * FROM users WHERE id=".$id);

   $response = array();

   if(mysqli_num_rows($record) > 0){
      $row = mysqli_fetch_assoc($record);
      $response = array(
         "name" => $row['name'],
         "email" => $row['email'],
         "gender" => $row['gender'],
         "city" => $row['city'],
      );

      echo json_encode( array("status" => 1,"data" => $response) );
      exit;
   }else{
      echo json_encode( array("status" => 0) );
      exit;
   }
}

// Update user
if($request == 3){
   $id = 0;

   if(isset($_POST['id'])){
      $id = mysqli_escape_string($con,$_POST['id']);
   }

   // Check id
   $record = mysqli_query($con,"SELECT id FROM users WHERE id=".$id);
   if(mysqli_num_rows($record) > 0){
 
      $name = mysqli_escape_string($con,trim($_POST['name']));
      $email = mysqli_escape_string($con,trim($_POST['email']));
      $gender = mysqli_escape_string($con,trim($_POST['gender']));
      $city = mysqli_escape_string($con,trim($_POST['city']));

      if( $name != '' && $email != '' && $gender != '' && $city != '' ){

         mysqli_query($con,"UPDATE users SET name='".$name."',email='".$email."',gender='".$gender."',city='".$city."' WHERE id=".$id);

         echo json_encode( array("status" => 1,"message" => "Record updated.") );
         exit;
      }else{
         echo json_encode( array("status" => 0,"message" => "Please fill all fields.") );
         exit;
      }

   }else{
      echo json_encode( array("status" => 0,"message" => "Invalid ID.") );
      exit;
   }
}

// Delete User
if($request == 4){
   $id = 0;

   if(isset($_POST['id'])){
      $id = mysqli_escape_string($con,$_POST['id']);
   }

   // Check id
   $record = mysqli_query($con,"SELECT id FROM users WHERE id=".$id);
   if(mysqli_num_rows($record) > 0){

      mysqli_query($con,"DELETE FROM users WHERE id=".$id);

      echo 1;
      exit;
   }else{
      echo 0;
      exit;
   }
}

6. jQuery

Inicializar tablas de datos

Inicializar DataTables en #userTabley asignar a userDataTable. establecer processing: true, serverSide: true, serverMethod: 'post'_ Especifique la URL de AJAX con la 'ajax'opción.

Con 'columns'la opción especifica los nombres de las claves que deben leerse de la respuesta de AJAX.

Actualizar usuario

Definir clickevento en .updateUserclase. Lea la identificación de usuario del data-idatributo y asigne a la idvariable. Actualizar valor de #txt_userid.

Envíe la solicitud AJAX POST al 'ajaxfile.php'archivo. Pasa {request: 2, id: id}, listo dataType: 'json'.
En la devolución de llamada exitosa, verifique si response.status == 1o no. Si es igual, lea los valores response.datay actualice el valor de los elementos de entrada modales de Bootstrap.

Definir clickevento en #btn_save. Lea la identificación de edición #txt_useridy asigne en la variable de identificación. Del mismo modo, lea el nombre, el correo electrónico, el género y la ciudad de los elementos de entrada y asígnelos en las variables.

Si los valores no están vacíos, envíe la solicitud AJAX POST al 'ajaxfile.php'archivo. Pasar {request: 3, id: id,name: name, email: email, gender: gender, city: city}como data. establecer dataType: 'json'_

En la devolución de llamada exitosa, verifique si response.status == 1o no. Si es igual entonces alert(response.message)y restablece el valor de los elementos de entrada.

Vuelva a cargar Datatable llamando userDataTable.ajax.reload()y alternando el #updateModalmodal.

Borrar usuario

Definir clickevento en .deleteUserclase. Leer eliminar ID de usuario del data-idatributo. Muestra el mensaje de alerta de confirmación. Si deleteConfirm == trueluego envía una solicitud AJAX POST al 'ajaxfile.php'archivo. Pasar {request: 4, id: id}como data.

En una devolución de llamada exitosa alert("Record deleted.")si response == 1y vuelve a cargar Datatable llamando a userDataTable.ajax.reload().

Código completado

$(document).ready(function(){

  // DataTable
  var userDataTable = $('#userTable').DataTable({
     'processing': true,
     'serverSide': true,
     'serverMethod': 'post',
     'ajax': {
        'url':'ajaxfile.php'
     },
     'columns': [
        { data: 'name' },
        { data: 'email' },
        { data: 'gender' },
        { data: 'city' },
        { data: 'action' },
     ]
  });

  // Update record
  $('#userTable').on('click','.updateUser',function(){
     var id = $(this).data('id');

     $('#txt_userid').val(id);

     // AJAX request
     $.ajax({
        url: 'ajaxfile.php',
        type: 'post',
        data: {request: 2, id: id},
        dataType: 'json',
        success: function(response){
           if(response.status == 1){

             $('#name').val(response.data.name);
             $('#email').val(response.data.email);
             $('#gender').val(response.data.gender);
             $('#city').val(response.data.city);

             userDataTable.ajax.reload();
           }else{
             alert("Invalid ID.");
           }
        }
     });

  });

  // Save user 
  $('#btn_save').click(function(){
     var id = $('#txt_userid').val();

     var name = $('#name').val().trim();
     var email = $('#email').val().trim();
     var gender = $('#gender').val().trim();
     var city = $('#city').val().trim();

     if(name !='' && email != '' && city != ''){

       // AJAX request
       $.ajax({
         url: 'ajaxfile.php',
         type: 'post',
         data: {request: 3, id: id,name: name, email: email, gender: gender, city: city},
         dataType: 'json',
         success: function(response){
            if(response.status == 1){
               alert(response.message);

               // Empty and reset the values
               $('#name','#email','#city').val('');
               $('#gender').val('male');
               $('#txt_userid').val(0);

               // Reload DataTable
               userDataTable.ajax.reload();

               // Close modal
               $('#updateModal').modal('toggle');
            }else{
               alert(response.message);
            }
         }
      });

    }else{
       alert('Please fill all fields.');
    }
  });

  // Delete record
  $('#userTable').on('click','.deleteUser',function(){
     var id = $(this).data('id');

     var deleteConfirm = confirm("Are you sure?");
     if (deleteConfirm == true) {
        // AJAX request
        $.ajax({
          url: 'ajaxfile.php',
          type: 'post',
          data: {request: 4, id: id},
          success: function(response){
             if(response == 1){
                alert("Record deleted.");

                // Reload DataTable
                userDataTable.ajax.reload();
             }else{
                alert("Invalid ID.");
             }
          }
        });
     } 

  });
});

7. Salida

Ver salida


8. Conclusión

En este ejemplo, he agregado botones en DataTables, pero de manera similar puede agregar otros elementos HTML como: etiqueta de anclaje, imagen, casilla de verificación, etc.

Fuente:  https://makitweb.com

#php #ajax 

I am Developer

1615040237

PHP jQuery Ajax Post Form Data Example

PHP jquery ajax POST request with MySQL. In this tutorial, you will learn how to create and submit a simple form in PHP using jQuery ajax post request. And how to submit a form data into MySQL database without the whole page refresh or reload. And also you will learn how to show an error message to the user if the user does not fill any form field.

And this tutorial also guide on how to send data to MySQL database using AJAX + jQuery + PHP without reloading the whole page and show a client-side validation error message if it has an error in the form.

PHP jQuery AJAX POST Form Data In Into MySQL DB Example

Just follow the few below steps and easily create and submit ajax form in PHP and MySQL with client-side validation.

  • Create Database And Table
  • Create a Database Connection File
  • Create An Ajax POST Form in PHP
  • Create An Ajax Data Store File

https://www.tutsmake.com/php-jquery-ajax-post-tutorial-example/

#jquery ajax serialize form data example #submit form using ajax in php example #save form data using ajax in php #how to insert form data using ajax in php #php jquery ajax form submit example #jquery ajax and jquery post form submit example with php

I am Developer

1597487472

Country State City Dropdown list in PHP MySQL PHP

Here, i will show you how to populate country state city in dropdown list in php mysql using ajax.

Country State City Dropdown List in PHP using Ajax

You can use the below given steps to retrieve and display country, state and city in dropdown list in PHP MySQL database using jQuery ajax onchange:

  • Step 1: Create Country State City Table
  • Step 2: Insert Data Into Country State City Table
  • Step 3: Create DB Connection PHP File
  • Step 4: Create Html Form For Display Country, State and City Dropdown
  • Step 5: Get States by Selected Country from MySQL Database in Dropdown List using PHP script
  • Step 6: Get Cities by Selected State from MySQL Database in DropDown List using PHP script

https://www.tutsmake.com/country-state-city-database-in-mysql-php-ajax/

#country state city drop down list in php mysql #country state city database in mysql php #country state city drop down list using ajax in php #country state city drop down list using ajax in php demo #country state city drop down list using ajax php example #country state city drop down list in php mysql ajax

Lilly  Wilson

Lilly Wilson

1659789180

Eliminar Registros Múltiples en DataTables Usando jQuery AJAX en PHP

El complemento DataTables es la forma más fácil de agregar paginación en la página con todas las funciones requeridas.

Para agregar el control de eliminación, puede agregar un botón de eliminación con cada registro o agregar casillas de verificación y un solo botón de eliminación.

En este tutorial, muestro cómo agregar varias casillas de verificación y eliminar registros seleccionados con un solo clic en DataTables usando jQuery AJAX.

1. Estructura de la mesa

Crear employeetabla.

CREATE TABLE `employee` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `emp_name` varchar(60) NOT NULL,
  `salary` varchar(50) NOT NULL,
  `gender` varchar(10) NOT NULL,
  `city` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. Configuración

Cree una config.phpconexión para la base de datos.

Código completado

<?php

$host = "localhost"; /* Host name */$user = "root"; /* User */$password = ""; /* Password */$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3. Descargar e incluir

  • Descarga Datatables desde aquí .
  • Incluir  datatables.min.cssy datatables.min.jsen <head>la sección y también incluir jQuery Library.
  • También puede utilizar CDN.
<!-- 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>

4.HTML

Crea un <table id='empTable' class='display dataTable' >.

Agregar fila de encabezado.

En la última celda, agregue todas las casillas de verificación y un botón para eliminar los registros marcados.

Código completado

<div >

   <!-- Table -->
   <table id='empTable' class='display dataTable'>
     <thead>
       <tr>
         <th>Employee name</th>
         <th>Email</th>
         <th>Gender</th>
         <th>Salary</th>
         <th>City</th>
         <th>Check All <input type="checkbox" class='checkall' id='checkall'><input type="button" id='delete_record' value='Delete' ></th>
       </tr>
     </thead>

   </table>
</div>

5. Guión

Inicialización de tabla de datos –

Inicialice DataTable en <table id='empTable' >.

Agregar 'processing': true, 'serverSide': true, 'serverMethod': 'post'. Especifique la URL de AJAX y los datos usando la 'ajax'opción.

Uso 'columns'de la opción para especificar nombres de campo que deben leerse de la respuesta AJAX.

Elimine la clasificación de la última columna usando la columnDefsopción.

Comprobar todo -

Si se hace clic en la casilla de verificación checkall, verifique que esté marcada o no. Si está marcado, configure todas las casillas de verificación marcadas por class='delete_check'.

Si no está marcado, elimine marcado de todas las casillas de verificación.

Casilla marcada –

Crea una checkcheckbox()función.

Cuente las casillas de verificación totales y las casillas de verificación marcadas class='delete_check'en la página.

Si el total de casillas de verificación es igual al total de casillas de verificación marcadas, marque la casilla de verificación marcar todo; de lo contrario, desmarque la casilla de verificación.

boton eliminar -

Lea todas las casillas de verificación marcadas class='delete_check'y presione el valor en deleteids_arrArray.

Si deleteids_arrla longitud de la matriz es mayor, se muestra la alerta de confirmación. Envíe la solicitud AJAX POST a 'ajaxfile.php' para eliminar registros cuando okse haga clic en el botón.

Pasar request: 2, deleteids_arr: deleteids_arrcomo data.

En una devolución de llamada exitosa, vuelva a cargar Datatable llamando a dataTable.ajax.reload().

Código completado

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

6. PHP

Crea un ajaxfile.phparchivo.

Desde este archivo, maneje dos solicitudes AJAX:

  • Si $request == 1luego lee los valores POST de DataTables. Si $searchQueryno está vacío, prepare la consulta de búsqueda. Cuente los registros totales sin y con filtro.

Obtenga registros de employeela tabla donde especifique la consulta de búsqueda, ordene por y limite.

Haga un bucle en los registros obtenidos e inicialice $dataArray con las claves especificadas en la columnsopción mientras se inicializa dataTable.

Asignar casilla de verificación en ‘action’clave. En la casilla de verificación agregada onclick=‘checkcheckbox()’, pase $row[‘id’]el valueatributo y class=‘delete_check’.

Asigne claves requeridas con valores en $responseArray y regrese en formato JSON.

  • Si $request == 2luego realiza un bucle en el $deleteids_arrArray y ejecuta DELETEla consulta en el id.

Código completado

<?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 = mysqli_real_escape_string($con,$_POST['search']['value']); // Search value

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

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

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

   ## Fetch records
   $empQuery = "select * from employee 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(
         "emp_name"=>$row['emp_name'],
         "email"=>$row['email'],
         "gender"=>$row['gender'],
         "salary"=>$row['salary'],
         "city"=>$row['city'],
         "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 = array();

   if(isset($_POST['deleteids_arr'])){
      $deleteids_arr = $_POST['deleteids_arr'];
   }
   foreach($deleteids_arr as $deleteid){
      mysqli_query($con,"DELETE FROM employee WHERE id=".$deleteid);
   }

   echo 1;
   exit;
}

7. Salida

Ver salida


8. Conclusión

Cree una columna separada para agregar casillas de verificación con registros.

En el botón Eliminar, haga clic en el bucle en las casillas de verificación marcadas y envíe una solicitud AJAX para ELIMINARLO y actualice la tabla de datos.

Fuente:  https://makitweb.com

#php #datatable #ajax #jquery 

Lilly  Wilson

Lilly Wilson

1658252280

Cree la paginación AJAX de Datatables desde PostgreSQL con PHP

Con la paginación, puede mostrar muchos datos en la página de manera efectiva.

Puede implementar esto fácilmente usando el complemento DataTables jQuery.

En este tutorial, muestro cómo puede crear la paginación AJAX de DataTables con búsqueda y clasificación desde la base de datos PostgreSQL usando PHP.

1. Estructura de la mesa

Estoy usando  employeesla tabla en el ejemplo. Tiene la siguiente estructura:

CREATE TABLE employees (
    id serial PRIMARY KEY,
    emp_name varchar(80) NOT NULL,
    salary varchar(20) NOT NULL,
    gender varchar(10) NOT NULL,
    city varchar(80) NOT NULL,
    email varchar(80) NOT NULL
)

2. Configuración

Cree una config.phppara la configuración de la base de datos.

Código completado

<?php

$host = "localhost";
$user = "postgres";
$password = "root";
$dbname = "tutorial";
$con = pg_connect("host=$host dbname=$dbname user=$user password=$password");

if (!$con) {
   die('Connection failed.');
}

3. Descargar e incluir

  • Descarga Datatables desde  aquí .
  • Incluir datatables.min.css, biblioteca jQuery y datatables.min.js.
  • También puede utilizar CDN.
<!-- 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.6.0/jquery.min.js"></script>

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

4.HTML

Cree un  <table id='empTable' class='display dataTable'> nombre de columna y agregue en  <thead>.

Código completado

<!-- 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.6.0/jquery.min.js"></script>

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

<!-- Table -->
<table id='empTable' class='display dataTable'>

  <thead>
    <tr>
      <th>Employee name</th>
      <th>Email</th>
      <th>Gender</th>
      <th>Salary</th>
      <th>City</th>
    </tr>
  </thead>

</table>

5. PHP

Crear ajaxfile.phparchivo.

Lee los valores POST de DataTables y los asigna a las variables.

Cuente los registros totales con y sin filtro de búsqueda de la employeestabla.

Obtenga registros de employees la tabla e inicialice  $data Array con valores.

NOTA: los nombres de las claves de matriz deben ser los mismos que los definidos en la columnsopción al inicializar DataTables.

Inicialice $responseArray con los valores requeridos y regrese en formato JSON.

Código completado

<?php
## Database configuration
include 'config.php';

## 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 = "id>$1";
$searchQueryVal = array();
$searchQueryVal[] = 0;

if($searchValue != ''){
     $searchQuery .= " and (emp_name ilike $2 or 
          email ilike $3 or 
          city ilike $4 ) ";

     $searchQueryVal[] = '%'.$searchValue.'%';
     $searchQueryVal[] = '%'.$searchValue.'%';
     $searchQueryVal[] = '%'.$searchValue.'%';

}

## Total number of records without filter
$sql = "select count(*) as allcount from employees";
$result = pg_query($con,$sql);
$records = pg_fetch_assoc($result);
$totalRecords = $records['allcount'];

## Total number of record with filter
$sql = "select count(*) as allcount from employees where ".$searchQuery;
$result = pg_query_params($con,$sql,$searchQueryVal);
$records = pg_fetch_assoc($result);
$totalRecordwithFilter = $records['allcount'];

## Fetch records
$sql = "select * from employees where ".$searchQuery." order by ".$columnName." ".$columnSortOrder." limit $rowperpage OFFSET $row";

$empRecords = pg_query_params($con,$sql,$searchQueryVal);
$data = array();

while ($row = pg_fetch_assoc($empRecords)) {
    $data[] = array( 
        "emp_name"=>$row['emp_name'],
        "email"=>$row['email'],
        "gender"=>$row['gender'],
        "salary"=>$row['salary'],
        "city"=>$row['city']
    );
}

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

echo json_encode($response);

6. jQuery

Inicialice DataTables en <table id='empTable'>.

Habilite el procesamiento del lado del servidor y configure el método POST usando opciones. Enviar solicitud AJAX a  'ajaxfile.php'.

En la  columnsopción, pase los nombres de las claves que se leen en la devolución de llamada exitosa de AJAX.

Código completado

$(document).ready(function(){
   $('#empTable').DataTable({
      'processing': true,
      'serverSide': true,
      'serverMethod': 'post',
      'ajax': {
          'url':'ajaxfile.php'
      },
      'columns': [
         { data: 'emp_name' },
         { data: 'email' },
         { data: 'gender' },
         { data: 'salary' },
         { data: 'city' },
      ]
   });
});

7. Salida

Ver salida


8. Conclusión

Si obtiene un error JSON al cargar la página, verifique las consultas SQL nuevamente y devuelva la respuesta y use la pestaña de red del navegador para depurar.

Fuente:  https://makitweb.com

#php #postgresql #ajax