Eladio Rau

Eladio Rau

1659796560

Supprimer Plusieurs Enregistrements Dans DataTables à L'aide De PHP

Le plugin DataTables est le moyen le plus simple d'ajouter une pagination sur la page avec toutes les fonctionnalités requises.

Pour ajouter un contrôle de suppression, vous pouvez soit ajouter un bouton de suppression avec chaque enregistrement, soit ajouter des cases à cocher et un seul bouton de suppression.

Dans ce didacticiel, je montre comment ajouter plusieurs cases à cocher et supprimer les enregistrements sélectionnés en un seul clic dans DataTables à l'aide de jQuery AJAX.

1. Structure du tableau

Créer un employeetableau.

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

Créez une config.phpconnexion pour la base de données.

Code terminé

<?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. Télécharger et inclure

  • Téléchargez les tableaux de données à partir d' ici .
  • Incluez  datatables.min.csset datatables.min.jsdans <head>la section et incluez également la bibliothèque jQuery.
  • Vous pouvez également utiliser 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

Créez un <table id='empTable' class='display dataTable' >.

Ajouter une ligne d'en-tête.

Dans la dernière cellule, ajoutez une case à cocher et un bouton pour supprimer les enregistrements cochés.

Code terminé

<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. Scénario

Initialisation de la table de données -

Initialiser DataTable sur <table id='empTable' >.

Ajoutez 'processing': true, 'serverSide': true, 'serverMethod': 'post'. Spécifiez l'URL AJAX et les données à l'aide de l' 'ajax'option.

Utilisation 'columns'de l'option pour spécifier les noms de champ qui doivent être lus à partir de la réponse AJAX.

Supprimer le tri de la dernière colonne à l'aide de l' columnDefsoption.

Vérifie tout -

Si la case à cocher checkall est cochée, vérifiez qu'elle est cochée ou non. Si coché, cochez toutes les cases cochées par class='delete_check'.

S'il n'est pas coché, supprimez la coche de toutes les cases à cocher.

Case cochée –

Créez une checkcheckbox()fonction.

Comptez le nombre total de cases à cocher et de cases cochées avec class='delete_check'sur la page.

Si le nombre total de cases est égal au nombre total de cases cochées, cochez la case Tout cocher, sinon décochez-la.

Bouton Supprimer –

Lire toutes les cases cochées par class='delete_check'et pousser la valeur dans deleteids_arrArray.

Si deleteids_arrla longueur du tableau est supérieure, affichez l'alerte de confirmation. Envoyez la requête AJAX POST à ​​'ajaxfile.php' pour supprimer les enregistrements lorsque okle bouton est cliqué.

Passe request: 2, deleteids_arr: deleteids_arrcomme data.

En cas de rappel réussi, rechargez le Datatable en appelant dataTable.ajax.reload().

Code terminé

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

Créez un ajaxfile.phpfichier.

À partir de ce fichier, gérez deux requêtes AJAX -

  • Si $request == 1alors lisez les valeurs POST DataTables. Si $searchQueryn'est pas vide, préparez la requête de recherche. Compter le nombre total d'enregistrements sans et avec filtre.

Récupérez les enregistrements de employeela table où spécifiez la requête de recherche, l'ordre et la limite.

Bouclez sur les enregistrements récupérés et initialisez $dataArray avec les clés spécifiées dans l' columnsoption lors de l'initialisation de dataTable.

Attribuer une case à cocher dans ‘action’la clé. Dans la case à cocher ajoutée onclick=‘checkcheckbox()’, passez $row[‘id’]l' valueattribut et class=‘delete_check’.

Attribuez les clés requises avec des valeurs dans $responseArray et renvoyez-les au format JSON.

  • Si $request == 2alors bouclez sur le $deleteids_arrtableau et exécutez DELETEla requête sur l'id.

Code terminé

<?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. Sortie

Afficher la sortie

8.Conclusion

Créez une colonne distincte pour ajouter des cases à cocher avec des enregistrements.

Sur le bouton de suppression, cliquez sur la boucle des cases cochées et envoyez une requête AJAX pour la SUPPRIMER et actualisez le DataTable.

Source :  https://makitweb.com

#php #datatable #ajax #jquery 

What is GEEK

Buddha Community

Supprimer Plusieurs Enregistrements Dans DataTables à L'aide De PHP
Eladio Rau

Eladio Rau

1659796560

Supprimer Plusieurs Enregistrements Dans DataTables à L'aide De PHP

Le plugin DataTables est le moyen le plus simple d'ajouter une pagination sur la page avec toutes les fonctionnalités requises.

Pour ajouter un contrôle de suppression, vous pouvez soit ajouter un bouton de suppression avec chaque enregistrement, soit ajouter des cases à cocher et un seul bouton de suppression.

Dans ce didacticiel, je montre comment ajouter plusieurs cases à cocher et supprimer les enregistrements sélectionnés en un seul clic dans DataTables à l'aide de jQuery AJAX.

1. Structure du tableau

Créer un employeetableau.

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

Créez une config.phpconnexion pour la base de données.

Code terminé

<?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. Télécharger et inclure

  • Téléchargez les tableaux de données à partir d' ici .
  • Incluez  datatables.min.csset datatables.min.jsdans <head>la section et incluez également la bibliothèque jQuery.
  • Vous pouvez également utiliser 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

Créez un <table id='empTable' class='display dataTable' >.

Ajouter une ligne d'en-tête.

Dans la dernière cellule, ajoutez une case à cocher et un bouton pour supprimer les enregistrements cochés.

Code terminé

<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. Scénario

Initialisation de la table de données -

Initialiser DataTable sur <table id='empTable' >.

Ajoutez 'processing': true, 'serverSide': true, 'serverMethod': 'post'. Spécifiez l'URL AJAX et les données à l'aide de l' 'ajax'option.

Utilisation 'columns'de l'option pour spécifier les noms de champ qui doivent être lus à partir de la réponse AJAX.

Supprimer le tri de la dernière colonne à l'aide de l' columnDefsoption.

Vérifie tout -

Si la case à cocher checkall est cochée, vérifiez qu'elle est cochée ou non. Si coché, cochez toutes les cases cochées par class='delete_check'.

S'il n'est pas coché, supprimez la coche de toutes les cases à cocher.

Case cochée –

Créez une checkcheckbox()fonction.

Comptez le nombre total de cases à cocher et de cases cochées avec class='delete_check'sur la page.

Si le nombre total de cases est égal au nombre total de cases cochées, cochez la case Tout cocher, sinon décochez-la.

Bouton Supprimer –

Lire toutes les cases cochées par class='delete_check'et pousser la valeur dans deleteids_arrArray.

Si deleteids_arrla longueur du tableau est supérieure, affichez l'alerte de confirmation. Envoyez la requête AJAX POST à ​​'ajaxfile.php' pour supprimer les enregistrements lorsque okle bouton est cliqué.

Passe request: 2, deleteids_arr: deleteids_arrcomme data.

En cas de rappel réussi, rechargez le Datatable en appelant dataTable.ajax.reload().

Code terminé

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

Créez un ajaxfile.phpfichier.

À partir de ce fichier, gérez deux requêtes AJAX -

  • Si $request == 1alors lisez les valeurs POST DataTables. Si $searchQueryn'est pas vide, préparez la requête de recherche. Compter le nombre total d'enregistrements sans et avec filtre.

Récupérez les enregistrements de employeela table où spécifiez la requête de recherche, l'ordre et la limite.

Bouclez sur les enregistrements récupérés et initialisez $dataArray avec les clés spécifiées dans l' columnsoption lors de l'initialisation de dataTable.

Attribuer une case à cocher dans ‘action’la clé. Dans la case à cocher ajoutée onclick=‘checkcheckbox()’, passez $row[‘id’]l' valueattribut et class=‘delete_check’.

Attribuez les clés requises avec des valeurs dans $responseArray et renvoyez-les au format JSON.

  • Si $request == 2alors bouclez sur le $deleteids_arrtableau et exécutez DELETEla requête sur l'id.

Code terminé

<?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. Sortie

Afficher la sortie

8.Conclusion

Créez une colonne distincte pour ajouter des cases à cocher avec des enregistrements.

Sur le bouton de suppression, cliquez sur la boucle des cases cochées et envoyez une requête AJAX pour la SUPPRIMER et actualisez le DataTable.

Source :  https://makitweb.com

#php #datatable #ajax #jquery 

hourly developer

hourly developer

1597820991

Hire PHP Developer

Looking to develop a PHP based website from scratch or revamp your existing website?

HourlyDeveloper.io has always been an industry leader for companies and business owners looking to hire PHP web developer. By choosing to Hire PHP Developer from our company, you can always expect the best results. Our PHP services and solutions are always flexible which means that no matter the nature of your project, you can always count on us for getting the best PHP expertise.

Consult with our experts: https://bit.ly/3aEGxPy

#hire php developer #php developer #php development company #php development services #php development #php

WebClues Infotech

WebClues Infotech

1617276472

Hire PHP Developer - Best PHP Web Frameworks for Web Development

A framework that can drastically cut down the requirement to write original code to develop the web apps as per your requirement is PHP Framework. PHP frameworks offer code libraries for commonly used functions to reduce the development time.

Want to use PHP Web Frameworks for your web applications?

WebClues Infotech offers a service to hire dedicated PHP developers for all of the below-mentioned frameworks

  • Laravel Developer
  • Codeigniter Developer
  • Yii Developer
  • Zend Developer
  • Cake PHP Developer
  • Core PHP Developer

Not sure which framework to use for your PHP web application?

Contact us

Schedule Interview with PHP Developer https://bit.ly/3dsTWf0

Email: sales@webcluesinfotech.com

#hire php developer #hire php web developers #hire php developer in 2021 #hire php developers & dedicated php programmers #hire php developers india #hire and outsource freelance php developers

Mariya James

Mariya James

1613990718

Top PHP web development company| PHP development services India

ValueCoders is a leading PHP app development company that focuses on building robust, secure & scalable web applications for start-ups, enterprises, and entrepreneurs.

We have 16+ years of experience and have delivered custom PHP web development solutions to 2500+ global clients catering industry verticals, including healthcare, adtech, eLearning, data analysis, Fintech, eCommerce, etc

Are you planning to outsource PHP development services? Or want to hire an offshore PHP development team?

#hire php developer #hire a php developer in india #hire dedicated php programmers #hire php coders #php developer in india #php developers for hire

hourly developer

hourly developer

1593154878

Hire Dedicated PHP Developer

Looking to hire affordable yet experienced PHP developers?

Hire Dedicated PHP Developer, who can convert your idea to reality, within the stipulated time frame. HourlyDeveloper.io expertise & experience as the top PHP development company put us above our competitors, in many ways. We have some of the top PHP developers in the industry, which can create anything you can imagine, that too, at the most competitive prices.

Consult with our experts:- https://bit.ly/2NpKnB8

#hire dedicated php developer #php developers #php development company #php development services #php development #php developer