Chỉnh sửa dữ liệu trực tiếp trên bảng dữ liệu bằng Jquery Ajax

Cập nhật lần cuối: 07 Tháng Mười 2023

Lập trình C#.NET

3,117 Lượt xem

Thao tác nhanh là một trong những điểm mạnh giúp phần mềm hay website của bạn được nhiều người ưa sử dụng. Trong thao tác trên bảng dữ liệu, việc thay đổi dữ liệu và được lưu trữ ngay lập tức là việc rất thú vị, nó giống như việc bạn sử dụng Excel vậy. Chính vì vậy mà trong bài viết này mình sẽ chia sẻ về cách để chỉnh sửa dữ liệu trực tiếp trên bảng dữ liệu bằng Jquery Ajax kết hợp với PHP và MySQL.

Mình sẽ hướng dẫn từng bước để bạn dễ dàng nắm được nội dung bài viết. Trước khi bắt đầu bạn cần nắm một số kiến thức về PHP và Ajax, đồng thời đã cài đặt Xampp để làm demo theo hướng dẫn này.

Tạo bảng dữ liệu mẫu

Đầu tiên mình sẽ tạo ra một bảng cơ sở dữ liệu MySQL để lưu dữ các dữ liệu. Bạn chạy phần mềm Xampp lên, kích hoạt Apache và MySQL. Sau đó truy cập đến đường dẫn http://localhost/phpmyadmin/.

Thực hiện theo các bước để tạo dữ liệu

Thực hiện theo các bước trên hình để tạo dữ liệu. Dữ liệu mình tạo sẽ có tên là demo. Tiếp theo bạn viết một đoạn Query để tạo ra một bảng có tên users nằm trong cơ sở dữ liệu demo như sau:

Thực hiện theo các bước để tạo bảng user cho cơ sở dữ liệu

Trong bảng này mình sẽ sử dụng 5 trường dữ liệu. Trong đó có một trường “id” sử dụng thuộc tính Auto_Increment (tức là tự động tăng số), với trường này mình sẽ không cần phải đưa dữ liệu vào.

Như vậy là đã có dữ liệu, bây giờ mình tiến hành xây dựng thư mục ứng dụng và các tệp cần thiết.

Tạo tệp cấu hình kết nối dữ liệu

Đầu tiên bạn truy cập vào đường dẫn: C:xampphtdocs. Bạn tạo một thư mục trong này với tên bất kỳ, mình sẽ tạo một thư mục có tên là demo. Để làm việc được với cơ sở dữ liệu, bạn cần kết nối đến chúng. Mình sẽ tạo một file có tên config.php trong thư mục với tạo này.

Tạo tệp tin có tên config.php để kết nối đến cơ sở dữ liệu

Tiếp theo hãy mở tệp này lên bằng trình soạn thảo văn bản (notepad hay bất cứ phần mềm văn bản nào bạn có. Ở bài này mình dùng Atom). Mình khuyên bạn nên sử dụng các phần mềm chuyên nghiệp để dễ dàng code và quản lý các tệp, các thư mục. Phía dưới là một phần cửa sổ làm việc của Atom, tại đây bạn có thể thấy phần code bên phải và bên trái là các thư mục và tệp tin trong thư mục. Mình dễ dàng chuyển đổi mà không cần phải Ctrl+tab nhiều để mở tệp.

Phần làm việc của Atom rất đơn giản và dễ dàng làm việc

Để kết nối đến cơ sở dữ liệu bạn thêm code sau vào file config.php

<?php
   $host = "localhost";
   $username = "root";
   $password = "";
   $database = "demo";
   $conn = mysqli_connect($host, $username, $password,$database);
   if (!$conn) {
     die("Kết nối thất bại: " . mysqli_connect_error());
   }

Như vậy là đã xong phần kết nối. Bạn có thể chạy thử bằng cách gõ đường dẫn http://localhost/demo/config.php. Nếu không hiện gì là đã kết nối thành công, nếu hiện cảnh báo thì bạn xem cảnh báo để biết lỗi gì nhé.

Tạo mã HTML và nhúng mã PHP để lấy dữ liệu

Bây giờ trong thư mục demo, mình sẽ tạp thêm một tệp tin có tên index.php. Tệp này sẽ chứa các mã hiển thị dữ liệu, là tệp sẽ hiển thị khi bạn truy cập http://localhost/demo/.

Tạo tệp file chính index.php để hiển thị dữ liệu

Sau đó hãy tạo ra một bảng bằng html và lồng vào các đoạn mã PHP như sau:

<?php include "config.php"; ?>
  <div class='container'>
    <table width='100%' border='0'>
      <tr>
        <th width='10%'>ID</th>
        <th width='40%'>Username</th>
        <th width='40%'>Name</th>
      </tr>
      <?php 
        $query = "select * from users order by name";
        $result = mysqli_query($conn,$query);
        $count = 1;
        while($row = mysqli_fetch_array($result) ){
          $id = $row['id'];
          $username = $row['username'];
          $name = $row['name'];
       ?>
          <tr>
            <td><?php echo $count; ?></td>
            <td> 
               <div contentEditable='true' class='edit' id='username_<?php echo $id; ?>'> 
                 <?php echo $username; ?>
               </div> 
            </td>
            <td> 
               <div contentEditable='true' class='edit' id='name_<?php echo $id; ?>'>
                 <?php echo $name; ?> 
               </div> 
            </td>
         </tr>
      <?php
         $count ++;
        }
      ?> 
    </table>
 </div>

Lưu ý là ở đây mình không lấy hết dữ liệu lên nhé, nếu bạn thích có thể lấy thêm tùy mục đích của bạn !

Kết quả sẽ hiển thị như sau:

Trước khi thêm dữ liệu

Bây giờ thêm một ít dữ liệu vào và kết quả như sau:

Sau khi thêm dữ liệu

Nhìn không đẹp lắm nên mình sẽ thêm một ít CSS như sau:

<style>
  .edit{
      width: 100%;
      height: 25px;
  }
  .editMode{
      border: 1px solid black;
  }
  table {
      border:3px solid lavender;
      border-radius:3px;
  }
  table tr:nth-child(1){
      background-color:dodgerblue;
  }
  table tr:nth-child(1) th{
      color:white;
      padding:10px 0px;
      letter-spacing: 1px;
  }
  table td{
      padding:10px;
  }
  table tr:nth-child(even){
      background-color:lavender;
      color:black;
  }
<style>

và kết quả sẽ là:

Sau khi được cập nhật CSS

Tạo hàm update dữ liệu khi dữ liệu thay đổi

Bây giờ mình sẽ tạo một tệp có tên update.php trong thư mục demo và thêm vào đoạn code sau:

<?php
   include "config.php";
   $field = $_POST['field'];
   $value = $_POST['value'];
   $editid = $_POST['id'];
   $query = "UPDATE users SET ".$field."='".$value."' WHERE id=".$editid;
   mysqli_query($conn,$query);
   echo 1;

Hàm này sẽ giúp dữ liệu được thay đổi thông qua Ajax.

Tạo mã Ajax để lưu dữ liệu đã thay đổi

Và đây là thành phần quan trọng Jquery Ajax. Ngay dưới file index.php bạn thêm vào đoạn Ajax như sau:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
  $(document).ready(function(){
    $('.edit').click(function(){
      $(this).addClass('editMode');
    });

    $(".edit").focusout(function(){
      $(this).removeClass("editMode");
      var id = this.id;
      var split_id = id.split("_");
      var field_name = split_id[0];
      var edit_id = split_id[1];
      var value = $(this).text();

      $.ajax({
         url: 'update.php',
         type: 'post',
         data: { field:field_name, value:value, id:edit_id },
         success:function(response){
            console.log('Save successfully');
         }
       });

    });
  });
</script>

Và dưới đây là kết quả.