Como Adicionar Editar E Excluir Na Paginação DataTables AJAX Com PHP

Com o uso do plugin DataTables jQuery, você pode listar seus registros em formato de paginação.

Você pode adicionar elementos HTML como – botões, link, imagem, etc com um registro.

Para isso precisa passar elemento no formato de string HTML do script PHP.

Neste tutorial, mostro como você pode adicionar botões editar e excluir na paginação Datatables AJAX com PHP.

NOTA – Estou usando o modal Bootstrap para atualizar um registro.

1. Estrutura da tabela

Crie usersuma tabela e adicionei alguns 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. Configuração

Crie um config.phppara a conexão de banco de dados.

Código concluído

<?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. Baixe e inclua

Baixe Datatables aqui e Bootstrap aqui .
Inclua datatables.min.css, bootstrap.min.css, biblioteca jQuery bootstrap.min.js, e datatables.min.jsna <head>seção.
Você também pode usar 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

Crie <div id="updateModal" >modal para atualizar os detalhes do usuário. Criado um campo oculto para armazenar o ID do usuário de edição e <button id="btn_save">atualizar o usuário ao clicar.

Exibir lista de usuários em <table id='userTable' >. Na última coluna, exiba o botão editar e excluir.

Código concluído

<!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

Crie um ajaxfile.phparquivo para lidar com solicitações AJAX.

Lidar com 4 solicitações -

If $request == 1 – Retorna a resposta DataTable.

Leia os valores POST da DataTable e atribua-os em variáveis.

Se $searchnão estiver vazio, prepare a consulta de pesquisa e atribua na $searchQueryvariável.

Contar registros totais com e sem filtro de pesquisa e atribuir variáveis. Buscar registros da users tabela onde passar $searchQuery a WHERE cláusula e especificar ORDER BY e LIMIT.

Faça um loop nos registros buscados. Exiba botões de atualização e exclusão em DataTable usando string HTML.

Crie um botão de atualização e atribua em $updateButton. No botão adicione a 'updateUser'classe e use data-ido atributo para armazenar o ID do usuário. Adicione data-togglee data-targetatribua ao #updateModalmodal aberto.
Da mesma forma, crie o botão delete e atribua em $deleteButton. No botão adicione a 'deleteUser'classe e use data-ido atributo para armazenar o ID do usuário.

Concat $updateButtonand $deleteButtone assign na $actionvariável.

Inicialize $responseo Array com os valores necessários. Aqui, passe a chave $actionin 'action'.

Matriz de retorno $responseno formato JSON.

If $request == 2 – Retorna os detalhes do usuário por id.

Atribuir $_POST['id']à $idvariável. Busca um registro da userstabela por id. Se o número de registro buscado for maior que 0, leia os valores do campo e inicialize o $responseArray. Retorne um Array no formato JSON que contém array("status" => 1,"data" => $response).

Se o número de registro buscado for 0, retorne um Array no formato JSON que contenha array("status" => 1).

If $request == 3 – Atualiza os valores dos campos por id.

Atribuir $_POST['id']à $idvariável. Se $idfor maior que 0, leia o valor POST e atribua em uma variável.

Verifique se $idexiste na userstabela. Se existir, verifique se as variáveis não estão vazias, atualize um registro por id e retorne Array no formato JSON. A matriz contém array("status" => 1,"message" => "Record updated."). Se as variáveis estiverem vazias, retorne array("status" => 0,"message" => "Please fill all fields.")no formato JSON.

Se $idnão existir, retorne array("status" => 0,"message" => "Invalid ID.")no formato JSON.

If $request == 4 – Excluir um registro por id.

Atribuir $_POST['id']à $idvariável. Se $idfor maior que 0, leia o valor POST e atribua em uma variável.

Verifique se $idexiste na userstabela. Se existir, exclua um registro da userstabela por id e retorne 1, caso contrário, retorne 0.

Código concluído

<?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 DataTables

Inicialize DataTables #userTablee atribua a userDataTable. Definir processing: true, serverSide: true, serverMethod: 'post'. Especifique o URL AJAX com 'ajax'opção.

A opção With 'columns'especifica os nomes de chave que precisam ser lidos da resposta AJAX.

Atualizar usuário

Definir clickevento na .updateUserclasse. Leia o ID do usuário do data-idatributo e atribua à idvariável. Atualizar valor de #txt_userid.

Envie a solicitação POST AJAX para 'ajaxfile.php'o arquivo. Passe {request: 2, id: id}, ajuste dataType: 'json'.
No retorno de chamada bem-sucedido, verifique se response.status == 1ou não. Se for igual, leia os valores response.datae atualize o valor dos elementos de entrada modal do Bootstrap.

Definir clickevento em #btn_save. Leia o id de edição #txt_useride atribua na variável id. Da mesma forma, leia nome, email, sexo e cidade dos elementos de entrada e atribua variáveis.

Se os valores não estiverem vazios, envie a solicitação POST AJAX para 'ajaxfile.php'o arquivo. Passe {request: 3, id: id,name: name, email: email, gender: gender, city: city}como data. Definir dataType: 'json'.

No retorno de chamada bem-sucedido, verifique se response.status == 1ou não. Se for igual a então alert(response.message)e redefinir o valor dos elementos de entrada.

Recarregue Datatable chamando userDataTable.ajax.reload()e alternando o #updateModalmodal.

Deletar usuário

Definir clickevento na .deleteUserclasse. Leia excluir ID do usuário do data-idatributo. Exibe a mensagem de alerta de confirmação. Se deleteConfirm == true, então, envie a solicitação POST AJAX para 'ajaxfile.php'o arquivo. Passe {request: 4, id: id}como data.

No retorno de chamada bem-sucedido alert("Record deleted.")se response == 1e recarregue Datatable chamando userDataTable.ajax.reload().

Código concluído

$(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. Saída

Ver saída

8. Conclusão

Neste exemplo, adicionei botões nas DataTables, mas você também pode adicionar outros elementos HTML, como – marca âncora, imagem, caixa de seleção, etc.

Fonte: https://makitweb.com

#php #ajax

What is GEEK

Buddha Community

Como Adicionar Editar E Excluir Na Paginação DataTables AJAX Com PHP

Laurianne Schumm

1656648920

Como Adicionar Editar E Excluir Na Paginação DataTables AJAX Com PHP

Com o uso do plugin DataTables jQuery, você pode listar seus registros em formato de paginação.

Você pode adicionar elementos HTML como – botões, link, imagem, etc com um registro.

Para isso precisa passar elemento no formato de string HTML do script PHP.

Neste tutorial, mostro como você pode adicionar botões editar e excluir na paginação Datatables AJAX com PHP.

NOTA – Estou usando o modal Bootstrap para atualizar um registro.

1. Estrutura da tabela

Crie usersuma tabela e adicionei alguns 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. Configuração

Crie um config.phppara a conexão de banco de dados.

Código concluído

<?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. Baixe e inclua

Baixe Datatables aqui e Bootstrap aqui .
Inclua datatables.min.css, bootstrap.min.css, biblioteca jQuery bootstrap.min.js, e datatables.min.jsna <head>seção.
Você também pode usar 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

Exibir lista de usuários em <table id='userTable' >. Na última coluna, exiba o botão editar e excluir.

Código concluído

<!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

Crie um ajaxfile.phparquivo para lidar com solicitações AJAX.

Lidar com 4 solicitações -

If $request == 1 – Retorna a resposta DataTable.

Leia os valores POST da DataTable e atribua-os em variáveis.

Se $searchnão estiver vazio, prepare a consulta de pesquisa e atribua na $searchQueryvariável.

Contar registros totais com e sem filtro de pesquisa e atribuir variáveis. Buscar registros da users tabela onde passar $searchQuery a WHERE cláusula e especificar ORDER BY e LIMIT.

Faça um loop nos registros buscados. Exiba botões de atualização e exclusão em DataTable usando string HTML.

Crie um botão de atualização e atribua em $updateButton. No botão adicione a 'updateUser'classe e use data-ido atributo para armazenar o ID do usuário. Adicione data-togglee data-targetatribua ao #updateModalmodal aberto.
Da mesma forma, crie o botão delete e atribua em $deleteButton. No botão adicione a 'deleteUser'classe e use data-ido atributo para armazenar o ID do usuário.

Concat $updateButtonand $deleteButtone assign na $actionvariável.

Inicialize $responseo Array com os valores necessários. Aqui, passe a chave $actionin 'action'.

Matriz de retorno $responseno formato JSON.

If $request == 2 – Retorna os detalhes do usuário por id.

Se o número de registro buscado for 0, retorne um Array no formato JSON que contenha array("status" => 1).

If $request == 3 – Atualiza os valores dos campos por id.

Atribuir $_POST['id']à $idvariável. Se $idfor maior que 0, leia o valor POST e atribua em uma variável.

Se $idnão existir, retorne array("status" => 0,"message" => "Invalid ID.")no formato JSON.

If $request == 4 – Excluir um registro por id.

Atribuir $_POST['id']à $idvariável. Se $idfor maior que 0, leia o valor POST e atribua em uma variável.

Verifique se $idexiste na userstabela. Se existir, exclua um registro da userstabela por id e retorne 1, caso contrário, retorne 0.

Código concluído

<?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 DataTables

Inicialize DataTables #userTablee atribua a userDataTable. Definir processing: true, serverSide: true, serverMethod: 'post'. Especifique o URL AJAX com 'ajax'opção.

A opção With 'columns'especifica os nomes de chave que precisam ser lidos da resposta AJAX.

Atualizar usuário

Definir clickevento na .updateUserclasse. Leia o ID do usuário do data-idatributo e atribua à idvariável. Atualizar valor de #txt_userid.

Definir clickevento em #btn_save. Leia o id de edição #txt_useride atribua na variável id. Da mesma forma, leia nome, email, sexo e cidade dos elementos de entrada e atribua variáveis.

No retorno de chamada bem-sucedido, verifique se response.status == 1ou não. Se for igual a então alert(response.message)e redefinir o valor dos elementos de entrada.

Recarregue Datatable chamando userDataTable.ajax.reload()e alternando o #updateModalmodal.

Deletar usuário

No retorno de chamada bem-sucedido alert("Record deleted.")se response == 1e recarregue Datatable chamando userDataTable.ajax.reload().

Código concluído

$(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. Saída

Ver saída

8. Conclusão

Neste exemplo, adicionei botões nas DataTables, mas você também pode adicionar outros elementos HTML, como – marca âncora, imagem, caixa de seleção, etc.

Fonte: 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

Neil Morgan

1659201840

Como Editar E Excluir Registro De DataTables Com AJAX E PHP

Com o uso do plugin DataTables jQuery, você pode listar seus registros em formato de paginação.

Você pode adicionar elementos HTML como – botões, link, imagem, etc com um registro.

Para isso precisa passar elemento no formato de string HTML do script PHP.

Neste tutorial, mostro como você pode adicionar botões editar e excluir na paginação Datatables AJAX com PHP.

NOTA – Estou usando o modal Bootstrap para atualizar um registro.

1. Estrutura da tabela

Crie usersuma tabela e adicionei alguns 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. Configuração

Crie um config.phppara a conexão de banco de dados.

Código concluído

<?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. Baixe e inclua

Baixe Datatables aqui e Bootstrap aqui .
Inclua datatables.min.css, bootstrap.min.css, biblioteca jQuery bootstrap.min.js, e datatables.min.jsna <head>seção.
Você também pode usar 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

Exibir lista de usuários em <table id='userTable' >. Na última coluna, exiba o botão editar e excluir.

Código concluído

<!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

Crie um ajaxfile.phparquivo para lidar com solicitações AJAX.

Lidar com 4 solicitações -

If $request == 1 – Retorna a resposta DataTable.

Leia os valores POST da DataTable e atribua-os em variáveis.

Se $searchnão estiver vazio, prepare a consulta de pesquisa e atribua na $searchQueryvariável.

Contar registros totais com e sem filtro de pesquisa e atribuir variáveis. Buscar registros da users tabela onde passar $searchQuery a WHERE cláusula e especificar ORDER BY e LIMIT.

Faça um loop nos registros buscados. Exiba botões de atualização e exclusão em DataTable usando string HTML.

Crie um botão de atualização e atribua em $updateButton. No botão adicione a 'updateUser'classe e use data-ido atributo para armazenar o ID do usuário. Adicione data-togglee data-targetatribua ao #updateModalmodal aberto.
Da mesma forma, crie o botão delete e atribua em $deleteButton. No botão adicione a 'deleteUser'classe e use data-ido atributo para armazenar o ID do usuário.

Concat $updateButtonand $deleteButtone assign na $actionvariável.

Inicialize $responseo Array com os valores necessários. Aqui, passe a chave $actionin 'action'.

Matriz de retorno $responseno formato JSON.

If $request == 2 – Retorna os detalhes do usuário por id.

Se o número de registro buscado for 0, retorne um Array no formato JSON que contenha array("status" => 1).

If $request == 3 – Atualiza os valores dos campos por id.

Atribuir $_POST['id']à $idvariável. Se $idfor maior que 0, leia o valor POST e atribua em uma variável.

Se $idnão existir, retorne array("status" => 0,"message" => "Invalid ID.")no formato JSON.

If $request == 4 – Excluir um registro por id.

Atribuir $_POST['id']à $idvariável. Se $idfor maior que 0, leia o valor POST e atribua em uma variável.

Verifique se $idexiste na userstabela. Se existir, exclua um registro da userstabela por id e retorne 1, caso contrário, retorne 0.

Código concluído

<?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 DataTables

Inicialize DataTables #userTablee atribua a userDataTable. Definir processing: true, serverSide: true, serverMethod: 'post'. Especifique o URL AJAX com 'ajax'opção.

A opção With 'columns'especifica os nomes de chave que precisam ser lidos da resposta AJAX.

Atualizar usuário

Definir clickevento na .updateUserclasse. Leia o ID do usuário do data-idatributo e atribua à idvariável. Atualizar valor de #txt_userid.

Definir clickevento em #btn_save. Leia o id de edição #txt_useride atribua na variável id. Da mesma forma, leia nome, email, sexo e cidade dos elementos de entrada e atribua variáveis.

No retorno de chamada bem-sucedido, verifique se response.status == 1ou não. Se for igual a então alert(response.message)e redefinir o valor dos elementos de entrada.

Recarregue Datatable chamando userDataTable.ajax.reload()e alternando o #updateModalmodal.

Deletar usuário

No retorno de chamada bem-sucedido alert("Record deleted.")se response == 1e recarregue Datatable chamando userDataTable.ajax.reload().

Código concluído

$(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. Saída

Ver saída

8. Conclusão

Neste exemplo, adicionei botões nas DataTables, mas você também pode adicionar outros elementos HTML, como – marca âncora, imagem, caixa de seleção etc.

Fonte: https://makitweb.com

#php #ajax

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

Loyce Hodkiewicz

1659781800

Como Excluir Vários Registros Em DataTables Usando JQuery AJAX Em PHP

O plug-in DataTables é a maneira mais fácil de adicionar paginação na página com todos os recursos necessários.

Para adicionar o controle de exclusão, você pode adicionar um botão de exclusão com cada registro ou adicionar caixas de seleção e um único botão de exclusão.

Neste tutorial, mostro como você adiciona várias caixas de seleção e exclui registros selecionados em um único clique em DataTables usando jQuery AJAX.

1. Estrutura da tabela

Criar employeetabela.

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. Configuração

Crie uma config.phpconexão para banco de dados.

Código concluído

<?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. Baixe e inclua

Baixe as tabelas de dados aqui .
Incluir datatables.min.csse datatables.min.jsna <head>seção e também incluir biblioteca jQuery.
Você também pode usar 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

Crie um <table id='empTable' class='display dataTable' >.

Adicionar linha de cabeçalho.

Na última célula, adicione marque todas as caixas de seleção e um botão para excluir os registros marcados.

Código concluído

<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. Roteiro

Inicialização de DataTable -

Inicialize DataTable em <table id='empTable' >.

Adicionar 'processing': true, 'serverSide': true, 'serverMethod': 'post'. Especifique o URL AJAX e os dados usando a 'ajax'opção.

Usando 'columns'a opção para especificar nomes de campos que precisam ser lidos da resposta AJAX.

Remova a classificação da última coluna usando a columnDefsopção.

Confira tudo -

Se a caixa de seleção checkall estiver marcada, verifique se está marcada ou não. Se marcado, defina todas as caixas de seleção marcadas por class='delete_check'.

Se não estiver marcada, remova marcada de todas as caixas de seleção.

Caixa de seleção marcada –

Crie uma checkcheckbox()função.

Conte o total de caixas de seleção e caixas de seleção marcadas class='delete_check'na página.

Se o total de caixas de seleção for igual ao total de caixas de seleção marcadas, marque a caixa de seleção todas, caso contrário, desmarque a caixa de seleção.

botão Excluir -

Leia todas as caixas de seleção marcadas class='delete_check'e empurre o valor em deleteids_arrArray.

Se deleteids_arro comprimento da matriz for maior, exibirá o alerta de confirmação. Envie a solicitação POST AJAX para 'ajaxfile.php' para excluir registros quando oko botão for clicado.

Passe request: 2, deleteids_arr: deleteids_arrcomo data.

No retorno de chamada bem-sucedido, recarregue o Datatable chamando dataTable.ajax.reload().

Código concluído

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

Crie um ajaxfile.phparquivo.

A partir deste arquivo, trate de duas solicitações AJAX –

Se $request == 1então leia os valores POST de DataTables. Se $searchQuerynão estiver vazio, prepare a consulta de pesquisa. Contar registros totais sem e com filtro.

Buscar registros da employeetabela onde especifica a consulta de pesquisa, ordenar por e limite.

Faça um loop nos registros buscados e inicialize $datao Array com as chaves especificadas na columnsopção durante a inicialização do dataTable.

Atribuir caixa de seleção na ‘action’chave. Na caixa de seleção adicionada onclick=‘checkcheckbox()’, passe $row[‘id’]o valueatributo e class=‘delete_check’.

Atribua as chaves necessárias com valores em $responseArray e retorne no formato JSON.

If $request == 2então faz um loop no $deleteids_arrArray e executa DELETEa consulta no id.

Código concluído

<?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. Saída

Ver saída

8. Conclusão

Crie uma coluna separada para adicionar caixas de seleção com registros.

No botão delete, clique em loop nas caixas de seleção marcadas e envie a solicitação AJAX para DELETE e atualize o DataTable.

Fonte: https://makitweb.com

#php #datatable #jquery #ajax