Макар Дмитриевич Степанов

Макар Дмитриевич Степанов

1656683597

Изменить запись Удалить DataTables с помощью AJAX и PHP

С помощью подключаемого модуля DataTables jQuery вы можете перечислять свои записи в формате разбиения на страницы.

Вы можете добавить элементы HTML, такие как кнопки, ссылки, изображения и т. д. с записью.

Для этого необходимо передать элемент в формате строки HTML из скрипта PHP.

В этом руководстве я покажу, как вы можете добавить кнопки редактирования и удаления в разбиение на страницы AJAX Datatables с помощью PHP.

ПРИМЕЧАНИЕ . Я использую модальное окно Bootstrap для обновления записи.

1. Структура таблицы

Создайте usersтаблицу, и я добавил несколько записей.

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. Конфигурация

Создайте config.phpдля подключения к базе данных.

Завершенный код

<?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. Загрузите и включите

  • Скачайте Datatables отсюда и Bootstrap отсюда .
  • Включите  datatables.min.css, bootstrap.min.css, библиотеку jQuery bootstrap.min.js, и datatables.min.jsв <head>раздел.
  • Вы также можете использовать 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

Создайте <div id="updateModal" >модальное окно для обновления сведений о пользователе. Создано скрытое поле для хранения идентификатора пользователя редактирования и <button id="btn_save">обновления пользователя при нажатии.

Показать список пользователей в формате <table id='userTable' >. В последнем столбце отобразите кнопку редактирования и удаления.

Завершенный код

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

Создайте ajaxfile.phpфайл для обработки запросов AJAX.

Обработать 4 запроса –

Если $request == 1 — вернуть ответ DataTable.

Прочитайте значения DataTable POST и назначьте их переменным.

Если $searchне пусто, подготовьте поисковый запрос и присвойте его $searchQueryпеременной.

Подсчитайте общее количество записей с фильтром поиска и без него и назначьте переменные. Извлеките записи из  users таблицы, где перейдите  $searchQuery в  WHERE предложение и укажите  ORDER BY и  LIMIT.

Цикл по извлеченным записям. Отображение кнопок обновления и удаления в DataTable с помощью строки HTML.

  • Создайте кнопку обновления и назначьте в $updateButton. В кнопку добавьте 'updateUser'класс и используйте data-idатрибут для хранения идентификатора пользователя. Добавьте data-toggleи data-targetатрибут для открытия #updateModalмодального окна.
  • Точно так же создайте кнопку удаления и назначьте в $deleteButton. В кнопку добавьте 'deleteUser'класс и используйте data-idатрибут для хранения идентификатора пользователя.

Concat $updateButtonи $deleteButtonи назначить в $actionпеременной.

Инициализировать  $responseмассив требуемыми значениями. Вот, передай $actionключ 'action'.

Возвращает $responseмассив в формате JSON.

Если $request == 2 — вернуть информацию о пользователе по id.

Присвоить $_POST['id']переменной $id. Получить запись из usersтаблицы по id. Если количество извлеченных записей больше 0, то прочитайте значения полей и инициализируйте $responseмассив. Возвращает массив в формате JSON, содержащий array("status" => 1,"data" => $response).

Если количество извлеченных записей равно 0, верните массив в формате JSON, который содержит array("status" => 1).

Если $request == 3 — Обновить значения полей по id.

Присвоить $_POST['id']переменной $id. Если $idбольше 0, то прочитайте значение POST и присвойте его переменной.

Проверьте $id, существует ли он в usersтаблице. Если существует, проверьте, не пусты ли переменные, затем обновите запись по идентификатору и верните массив в формате JSON. Массив содержит array("status" => 1,"message" => "Record updated."). Если переменные пусты, возврат array("status" => 0,"message" => "Please fill all fields.")в формате JSON.

Если $idне существует, верните array("status" => 0,"message" => "Invalid ID.")в формате JSON.

Если $request == 4 — Удалить запись по id.

Присвоить $_POST['id']переменной $id. Если $idбольше 0, то прочитайте значение POST и присвойте его переменной.

Проверьте $id, существует ли он в usersтаблице. Если существует, удалите запись из usersтаблицы по идентификатору и верните 1, иначе верните 0.

Завершенный код

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

Инициализировать таблицы данных

Инициализируйте таблицы данных #userTableи назначьте их userDataTable. Установить processing: true, serverSide: true, serverMethod: 'post'. Укажите URL-адрес AJAX с 'ajax'опцией.

Параметр With 'columns'указывает имена ключей, которые необходимо прочитать из ответа AJAX.

Обновить пользователя

Определить clickсобытие в .updateUserклассе. Считайте идентификатор пользователя из data-idатрибута и назначьте его idпеременной. Обновить значение #txt_userid.

Отправить запрос AJAX POST в 'ajaxfile.php'файл. Проходи {request: 2, id: id}, ставь dataType: 'json'.
При успешном обратном вызове проверьте, если response.status == 1или нет. Если равно, то считывайте значения response.dataи обновляйте значение модальных элементов ввода Bootstrap.

Определить clickсобытие на #btn_save. Считайте идентификатор редактирования из #txt_useridи назначьте переменную идентификатора. Точно так же считайте имя, адрес электронной почты, пол и город из элементов ввода и назначьте переменные.

Если значения не пусты, отправьте запрос AJAX POST в 'ajaxfile.php'файл. Пройти {request: 3, id: id,name: name, email: email, gender: gender, city: city}как data. Установить dataType: 'json'.

При успешном обратном вызове проверьте, если response.status == 1или нет. Если равно, то alert(response.message)и сбросить значение входных элементов.

Перезагрузите Datatable, вызвав userDataTable.ajax.reload()и переключив #updateModalмодальное окно.

Удалить пользователя

Определить clickсобытие в .deleteUserклассе. Чтение удалить идентификатор пользователя из data-idатрибута. Отображение предупреждающего сообщения с подтверждением. Если deleteConfirm == trueзатем отправить запрос AJAX POST в 'ajaxfile.php'файл. Пройти {request: 4, id: id}как data.

При успешном обратном вызове alert("Record deleted.")if response == 1и перезагрузите Datatable, вызвав userDataTable.ajax.reload().

Завершенный код

$(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. Выход

Просмотр вывода

8. Заключение

В этом примере я добавил кнопки в DataTables, но вы можете аналогичным образом добавить другие элементы HTML, такие как тег привязки, изображение, флажок и т. д.

Источник: https://makitweb.com

#php #ajax 

What is GEEK

Buddha Community

Изменить запись Удалить DataTables с помощью AJAX и PHP

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

Макар Дмитриевич Степанов

Макар Дмитриевич Степанов

1656683597

Изменить запись Удалить DataTables с помощью AJAX и PHP

С помощью подключаемого модуля DataTables jQuery вы можете перечислять свои записи в формате разбиения на страницы.

Вы можете добавить элементы HTML, такие как кнопки, ссылки, изображения и т. д. с записью.

Для этого необходимо передать элемент в формате строки HTML из скрипта PHP.

В этом руководстве я покажу, как вы можете добавить кнопки редактирования и удаления в разбиение на страницы AJAX Datatables с помощью PHP.

ПРИМЕЧАНИЕ . Я использую модальное окно Bootstrap для обновления записи.

1. Структура таблицы

Создайте usersтаблицу, и я добавил несколько записей.

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. Конфигурация

Создайте config.phpдля подключения к базе данных.

Завершенный код

<?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. Загрузите и включите

  • Скачайте Datatables отсюда и Bootstrap отсюда .
  • Включите  datatables.min.css, bootstrap.min.css, библиотеку jQuery bootstrap.min.js, и datatables.min.jsв <head>раздел.
  • Вы также можете использовать 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

Создайте <div id="updateModal" >модальное окно для обновления сведений о пользователе. Создано скрытое поле для хранения идентификатора пользователя редактирования и <button id="btn_save">обновления пользователя при нажатии.

Показать список пользователей в формате <table id='userTable' >. В последнем столбце отобразите кнопку редактирования и удаления.

Завершенный код

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

Создайте ajaxfile.phpфайл для обработки запросов AJAX.

Обработать 4 запроса –

Если $request == 1 — вернуть ответ DataTable.

Прочитайте значения DataTable POST и назначьте их переменным.

Если $searchне пусто, подготовьте поисковый запрос и присвойте его $searchQueryпеременной.

Подсчитайте общее количество записей с фильтром поиска и без него и назначьте переменные. Извлеките записи из  users таблицы, где перейдите  $searchQuery в  WHERE предложение и укажите  ORDER BY и  LIMIT.

Цикл по извлеченным записям. Отображение кнопок обновления и удаления в DataTable с помощью строки HTML.

  • Создайте кнопку обновления и назначьте в $updateButton. В кнопку добавьте 'updateUser'класс и используйте data-idатрибут для хранения идентификатора пользователя. Добавьте data-toggleи data-targetатрибут для открытия #updateModalмодального окна.
  • Точно так же создайте кнопку удаления и назначьте в $deleteButton. В кнопку добавьте 'deleteUser'класс и используйте data-idатрибут для хранения идентификатора пользователя.

Concat $updateButtonи $deleteButtonи назначить в $actionпеременной.

Инициализировать  $responseмассив требуемыми значениями. Вот, передай $actionключ 'action'.

Возвращает $responseмассив в формате JSON.

Если $request == 2 — вернуть информацию о пользователе по id.

Присвоить $_POST['id']переменной $id. Получить запись из usersтаблицы по id. Если количество извлеченных записей больше 0, то прочитайте значения полей и инициализируйте $responseмассив. Возвращает массив в формате JSON, содержащий array("status" => 1,"data" => $response).

Если количество извлеченных записей равно 0, верните массив в формате JSON, который содержит array("status" => 1).

Если $request == 3 — Обновить значения полей по id.

Присвоить $_POST['id']переменной $id. Если $idбольше 0, то прочитайте значение POST и присвойте его переменной.

Проверьте $id, существует ли он в usersтаблице. Если существует, проверьте, не пусты ли переменные, затем обновите запись по идентификатору и верните массив в формате JSON. Массив содержит array("status" => 1,"message" => "Record updated."). Если переменные пусты, возврат array("status" => 0,"message" => "Please fill all fields.")в формате JSON.

Если $idне существует, верните array("status" => 0,"message" => "Invalid ID.")в формате JSON.

Если $request == 4 — Удалить запись по id.

Присвоить $_POST['id']переменной $id. Если $idбольше 0, то прочитайте значение POST и присвойте его переменной.

Проверьте $id, существует ли он в usersтаблице. Если существует, удалите запись из usersтаблицы по идентификатору и верните 1, иначе верните 0.

Завершенный код

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

Инициализировать таблицы данных

Инициализируйте таблицы данных #userTableи назначьте их userDataTable. Установить processing: true, serverSide: true, serverMethod: 'post'. Укажите URL-адрес AJAX с 'ajax'опцией.

Параметр With 'columns'указывает имена ключей, которые необходимо прочитать из ответа AJAX.

Обновить пользователя

Определить clickсобытие в .updateUserклассе. Считайте идентификатор пользователя из data-idатрибута и назначьте его idпеременной. Обновить значение #txt_userid.

Отправить запрос AJAX POST в 'ajaxfile.php'файл. Проходи {request: 2, id: id}, ставь dataType: 'json'.
При успешном обратном вызове проверьте, если response.status == 1или нет. Если равно, то считывайте значения response.dataи обновляйте значение модальных элементов ввода Bootstrap.

Определить clickсобытие на #btn_save. Считайте идентификатор редактирования из #txt_useridи назначьте переменную идентификатора. Точно так же считайте имя, адрес электронной почты, пол и город из элементов ввода и назначьте переменные.

Если значения не пусты, отправьте запрос AJAX POST в 'ajaxfile.php'файл. Пройти {request: 3, id: id,name: name, email: email, gender: gender, city: city}как data. Установить dataType: 'json'.

При успешном обратном вызове проверьте, если response.status == 1или нет. Если равно, то alert(response.message)и сбросить значение входных элементов.

Перезагрузите Datatable, вызвав userDataTable.ajax.reload()и переключив #updateModalмодальное окно.

Удалить пользователя

Определить clickсобытие в .deleteUserклассе. Чтение удалить идентификатор пользователя из data-idатрибута. Отображение предупреждающего сообщения с подтверждением. Если deleteConfirm == trueзатем отправить запрос AJAX POST в 'ajaxfile.php'файл. Пройти {request: 4, id: id}как data.

При успешном обратном вызове alert("Record deleted.")if response == 1и перезагрузите Datatable, вызвав userDataTable.ajax.reload().

Завершенный код

$(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. Выход

Просмотр вывода

8. Заключение

В этом примере я добавил кнопки в DataTables, но вы можете аналогичным образом добавить другие элементы HTML, такие как тег привязки, изображение, флажок и т. д.

Источник: 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

Максим Владимирович Назаров

Максим Владимирович Назаров

1659811440

Удалить несколько записей в таблицах данных с помощью jQuery AJAX PHP

Плагин DataTables — это самый простой способ добавить пагинацию на страницу со всеми необходимыми функциями.

Для добавления элемента управления удалением вы можете либо добавить кнопку удаления для каждой записи, либо добавить флажки и одну кнопку удаления.

В этом руководстве я покажу, как добавить несколько флажков и удалить выбранные записи одним щелчком мыши в DataTables с помощью jQuery AJAX.

1. Структура таблицы

Создать employeeтаблицу.

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. Конфигурация

Создайте соединение config.phpдля базы данных.

Завершенный код

<?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. Загрузите и включите

  • Скачайте Datatables отсюда .
  • Включите  datatables.min.cssи datatables.min.jsв <head>раздел, а также включите библиотеку jQuery.
  • Вы также можете использовать 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

Создайте <table id='empTable' class='display dataTable' >.

Добавить строку заголовка.

В последнюю ячейку добавьте флажок «Отметить все» и кнопку для удаления отмеченных записей.

Завершенный код

<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. Скрипт

Инициализация таблицы данных —

Инициализировать DataTable на <table id='empTable' >.

Добавьте 'processing': true, 'serverSide': true, 'serverMethod': 'post'. Укажите URL-адрес AJAX и данные, используя 'ajax'параметр.

Использование 'columns'параметра для указания имен полей, которые необходимо прочитать из ответа AJAX.

Убрать сортировку из последнего столбца с помощью columnDefsопции.

Проверить все -

Если флажок checkall установлен, проверьте, отмечен он или нет. Если флажок установлен, установите все флажки, отмеченные class='delete_check'.

Если флажок не установлен, снимите флажок со всех флажков.

Флажок установлен –

Создайте checkcheckbox()функцию.

Подсчитайте общее количество флажков и отмеченных флажков class='delete_check'на странице.

Если общее количество флажков равно общему количеству отмеченных флажков, установите флажок для всех флажков, в противном случае снимите флажок.

Кнопка Удалить –

Прочитайте все отмеченные флажки class='delete_check'и поместите значение в deleteids_arrмассив.

Если deleteids_arrдлина массива больше, отобразите предупреждение о подтверждении. Отправьте запрос AJAX POST в ajaxfile.php для удаления записей при okнажатии кнопки.

Проходите request: 2, deleteids_arr: deleteids_arrкак data.

При успешном обратном вызове перезагрузите Datatable, вызвав dataTable.ajax.reload().

Завершенный код

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

Создайте ajaxfile.phpфайл.

Из этого файла обработайте два запроса AJAX —

  • Если $request == 1затем прочитать значения POST DataTables. Если $searchQueryне пусто, подготовьте поисковый запрос. Подсчитайте общее количество записей без фильтра и с фильтром.

Выбрать записи из employeeтаблицы, где указать поисковый запрос, упорядочить по и ограничить.

Зациклиться на извлеченных записях и инициализировать $dataмассив ключами, указанными в columnsопции, при инициализации dataTable.

Назначьте флажок в ‘action’ключе. В добавленном флажке onclick=‘checkcheckbox()’передайте атрибут и .$row[‘id’]valueclass=‘delete_check’

Назначьте необходимые ключи со значениями в $responseмассиве и верните в формате JSON.

  • Если $request == 2затем зациклиться на $deleteids_arrмассиве и выполнить DELETEзапрос по идентификатору.

Завершенный код

<?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. Выход

Просмотр вывода

8. Заключение

Создайте отдельную колонку для добавления флажков с записями.

На кнопке удаления нажмите цикл на отмеченных флажках и отправьте запрос AJAX, чтобы УДАЛИТЬ его и обновить DataTable.

Источник:  https://makitweb.com

#php #datatable #ajax #jquery 

Евгения Дмитриевна Белоусова

Евгения Дмитриевна Белоусова

1659239040

Как редактировать и удалять записи DataTables с помощью AJAX и PHP

С помощью подключаемого модуля DataTables jQuery вы можете перечислять свои записи в формате разбиения на страницы.

Вы можете добавить элементы HTML, такие как кнопки, ссылки, изображения и т. д. с записью.

Для этого необходимо передать элемент в формате строки HTML из скрипта PHP.

В этом руководстве я покажу, как вы можете добавить кнопки редактирования и удаления в разбиение на страницы AJAX Datatables с помощью PHP.

ПРИМЕЧАНИЕ . Я использую модальное окно Bootstrap для обновления записи.

1. Структура таблицы

Создайте usersтаблицу, и я добавил несколько записей.

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. Конфигурация

Создайте config.phpдля подключения к базе данных.

Завершенный код

<?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. Загрузите и включите

  • Скачайте Datatables отсюда и Bootstrap отсюда .
  • Включите  datatables.min.css, bootstrap.min.css, библиотеку jQuery bootstrap.min.js, и datatables.min.jsв <head>раздел.
  • Вы также можете использовать 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

Создайте <div id="updateModal" >модальное окно для обновления сведений о пользователе. Создано скрытое поле для хранения идентификатора пользователя редактирования и <button id="btn_save">обновления пользователя при нажатии.

Показать список пользователей в формате <table id='userTable' >. В последнем столбце отобразите кнопку редактирования и удаления.

Завершенный код

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

Создайте ajaxfile.phpфайл для обработки запросов AJAX.

Обработать 4 запроса –

Если $request == 1 — вернуть ответ DataTable.

Прочитайте значения DataTable POST и назначьте их переменным.

Если $searchне пусто, подготовьте поисковый запрос и присвойте его $searchQueryпеременной.

Подсчитайте общее количество записей с фильтром поиска и без него и назначьте переменные. Извлеките записи из  users таблицы, где перейдите  $searchQuery в  WHERE предложение и укажите  ORDER BY и  LIMIT.

Цикл по извлеченным записям. Отображение кнопок обновления и удаления в DataTable с помощью строки HTML.

  • Создайте кнопку обновления и назначьте в $updateButton. В кнопку добавьте 'updateUser'класс и используйте data-idатрибут для хранения идентификатора пользователя. Добавьте data-toggleи data-targetатрибут для открытия #updateModalмодального окна.
  • Точно так же создайте кнопку удаления и назначьте в $deleteButton. В кнопку добавьте 'deleteUser'класс и используйте data-idатрибут для хранения идентификатора пользователя.

Concat $updateButtonи $deleteButtonи назначить в $actionпеременной.

Инициализировать  $responseмассив требуемыми значениями. Вот, передай $actionключ 'action'.

Возвращает $responseмассив в формате JSON.

Если $request == 2 — вернуть информацию о пользователе по id.

Присвоить $_POST['id']переменной $id. Получить запись из usersтаблицы по id. Если количество извлеченных записей больше 0, то прочитайте значения полей и инициализируйте $responseмассив. Возвращает массив в формате JSON, содержащий array("status" => 1,"data" => $response).

Если количество извлеченных записей равно 0, верните массив в формате JSON, который содержит array("status" => 1).

Если $request == 3 — Обновить значения полей по id.

Присвоить $_POST['id']переменной $id. Если $idбольше 0, то прочитайте значение POST и присвойте его переменной.

Проверьте $id, существует ли он в usersтаблице. Если существует, проверьте, не пусты ли переменные, затем обновите запись по идентификатору и верните массив в формате JSON. Массив содержит array("status" => 1,"message" => "Record updated."). Если переменные пусты, возврат array("status" => 0,"message" => "Please fill all fields.")в формате JSON.

Если $idне существует, верните array("status" => 0,"message" => "Invalid ID.")в формате JSON.

Если $request == 4 — Удалить запись по id.

Присвоить $_POST['id']переменной $id. Если $idбольше 0, то прочитайте значение POST и присвойте его переменной.

Проверьте $id, существует ли он в usersтаблице. Если существует, удалите запись из usersтаблицы по идентификатору и верните 1, иначе верните 0.

Завершенный код

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

Инициализировать таблицы данных

Инициализируйте DataTables #userTableи назначьте их userDataTable. Установить processing: true, serverSide: true, serverMethod: 'post'. Укажите URL-адрес AJAX с 'ajax'опцией.

Параметр With 'columns'указывает имена ключей, которые необходимо прочитать из ответа AJAX.

Обновить пользователя

Определить clickсобытие в .updateUserклассе. Прочитайте идентификатор пользователя из data-idатрибута и назначьте его idпеременной. Обновить значение #txt_userid.

Отправить запрос AJAX POST в 'ajaxfile.php'файл. Проходи {request: 2, id: id}, ставь dataType: 'json'.
При успешном обратном вызове проверьте, если response.status == 1или нет. Если равно, то считывайте значения response.dataи обновляйте значение модальных элементов ввода Bootstrap.

Определить clickсобытие на #btn_save. Считайте идентификатор редактирования из #txt_useridи назначьте переменную идентификатора. Точно так же считайте имя, адрес электронной почты, пол и город из элементов ввода и назначьте переменные.

Если значения не пусты, отправьте запрос AJAX POST в 'ajaxfile.php'файл. Пройти {request: 3, id: id,name: name, email: email, gender: gender, city: city}как data. Установить dataType: 'json'.

При успешном обратном вызове проверьте, если response.status == 1или нет. Если равно, то alert(response.message)и сбросить значение входных элементов.

Перезагрузите Datatable, вызвав userDataTable.ajax.reload()и переключив #updateModalмодальное окно.

Удалить пользователя

Определить clickсобытие в .deleteUserклассе. Чтение удалить идентификатор пользователя из data-idатрибута. Отображение предупреждающего сообщения с подтверждением. Если deleteConfirm == trueзатем отправить запрос AJAX POST в 'ajaxfile.php'файл. Пройти {request: 4, id: id}как data.

При успешном обратном вызове alert("Record deleted.")if response == 1и перезагрузите Datatable, вызвав userDataTable.ajax.reload().

Завершенный код

$(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. Выход

Просмотр вывода

8. Заключение

В этом примере я добавил кнопки в DataTables, но вы можете аналогичным образом добавить другие элементы HTML, такие как тег привязки, изображение, флажок и т. д.

Источник:  https://makitweb.com

#php #ajax