REST API - Dùng hàm FETCH để sửa một bản ghi - P3

Code: Default | Auth: 03cd82

Hướng dẫn chỉnh sửa cho code load lại bảng dữ liệu sau khi sửa hoặc xóa.

Chúng ta sẽ cải tiến ở file code đính kèm bài viết trên edit-user.zip

Bước 1: Bạn xuống cuối cùng trang web trước thẻ đóng của script </script> bạn viết thêm hàm LoadListUser()
 

edit-load-user.png



Bước 2: Đưa tên hàm vào trong thẻ body như ảnh sau:

body.png



Bước 3: Tìm đến dòng code có câu thông báo alert('Đã cập nhật thành công'); và thêm vào bên dưới nó lệnh như trong ảnh. Cái này là ở hàm SaveUpdate nhé.
 

load-list.png




Bước 4: Vào hàm DeleteRow () tiến hành thay thế dòng location.reload như trong ảnh
 

edit-reload.png



Bước 5: Thêm lệnh xóa rỗng bảng mỗi khi load danh sách user như ảnh dưới
 

empty-table.png



Thêm bước 6: Sửa lại thẻ bảng như ảnh dưới
 

edit-table.png



OK. GIờ bạn chạy code để xem kết quả.
Bạn nên thực hiện từng bước hướng dẫn để hiểu cách làm và áp dụng vào các phần khác. Bước thêm 6 này là do lúc đầu thiết kế thiếu phân tách bảng thì việc load lại bảng sẽ mất tiêu đề, nếu bạn làm từ đầu thì hãy phân tách luôn đỡ mất công sửa.

File code hoàn chỉnh https://zezo.dev/uploads/javascript/restful-api/edit-user--ok.zip

VẬY LÀ XONG CHỨC NĂNG THÊM SỬA XÓA ĐƠN GIẢN. CHÚC BẠN THÀNH CÔNG!