Hướng dẫn này sẽ giải thích về Bootstrap Datatable với Thêm, chỉnh sửa và xóa bản ghi. Ở đây chúng tôi sẽ giải thích hoạt động của Mysql CRUD trong Bootstrap Datatable. Hành động Thêm, chỉnh sửa và xóa này xảy ra khi sử dụng AJAX. Ở đây chúng ta sẽ sử dụng một Bootstrap Modal Popup đơn giản để tạo biểu mẫu thêm và chỉnh sửa
[Cũng đọc. Bootstrap DataTable Sử dụng PHP, Mysql, Ajax, Json với tập lệnh phía máy chủ]
CHÚNG TA LÀM GÌ HÔM NAY ĐÂY
Vài tháng trước, chúng tôi đã xuất bản một bài báo về Bootstrap với php, mysql server side script. Dựa trên bài viết trước về Bootstrap datatable, chúng ta sẽ tạo một datatable đơn giản với các tùy chọn thêm, chỉnh sửa và xóa. Bảng sẽ được sửa đổi bởi jQuery thông qua AJaX và PHP với MySQL trên phần phụ trợ. Chúng tôi sử dụng mã từ bài báo trước và thay đổi
Giải trình
MỞ RỘNG HTML & JAVASCRIPT & PHP
Trước hết, chúng tôi cần 2 cửa sổ phương thức mới để thêm mục mới và chỉnh sửa các mục hiện có
Để Thêm và chỉnh sửa, chúng tôi sử dụng Bootstrap Popup Modal bên dưới
×
Edit selected row
Firstname
E-mail
Mobile
Close
Save changes
×
Add new row
Firstname
E-mail
Mobile
Close
Save changes
Sau đó, đặt một nút thêm vào góc trên bên phải, nút này sẽ mở cửa sổ thêm phương thức. Biểu mẫu nhập mới sẽ lưu dữ liệu qua jQuery và sau đó thêm hàng mới vào bảng. Sau đó, chúng ta cần viết một số PHP
Bước tiếp theo là chỉnh sửa các hàng hiện tại. Chúng tôi đã đặt một nút chỉnh sửa ở cuối mỗi hàng. Khi người dùng nhấp vào nút này, editRow[id] sẽ được gọi
function editRow[id] {
if [ 'undefined' != typeof id ] {
$.getJSON['datatable.php?edit=' + id, function[obj] {
$['#edit-id'].val[obj.id];
$['#firstname'].val[obj.name];
$['#email'].val[obj.email];
$['#mobile'].val[obj.mobile];
$['#edit-modal'].modal['show']
}].fail[function[] { alert['Unable to fetch data, please try again later.'] }];
} else alert['Unknown row id.'];
}
Chức năng này cũng cần một số tập lệnh PHP ở phía máy chủ, như sau
Bây giờ chúng ta có thể thêm các mục mới và chỉnh sửa các mục hiện có. Nhưng nếu chúng ta cần xóa một mục nhập thì sao? . tạo một chức năng loại bỏ. Bên cạnh các nút chỉnh sửa, hãy tạo một nút xóa sẽ gọi hàm removeRow[id]
function removeRow[id] {
if [ 'undefined' != typeof id ] {
$.get['datatable.php?remove=' + id, function[] {
$['a[data-id="row-' + id + '"]'].parent[].parent[].remove[];
}].fail[function[] { alert['Unable to fetch data, please try again later.'] }];
} else alert['Unknown row id.'];
}
Và như bạn đoán, chúng tôi cũng cần một số tập lệnh phía máy chủ
TÓM LƯỢC
Vì vậy, chúng tôi tiếp tục bài viết trước và mở rộng nó. Bây giờ chúng tôi có thể tạo các mục mới, chỉnh sửa các mục hiện có hoặc xóa chúng. Các chức năng này được xử lý thông qua AJaX, vì vậy bạn không phải tải lại trang web mỗi khi gửi biểu mẫu
Bootgrid là một plugin lưới jQuery mạnh mẽ giúp chuyển đổi một bảng HTML đơn giản thành một lưới với các tính năng mạnh mẽ như sắp xếp, phân trang, tìm kiếm, thêm bản ghi, chỉnh sửa bản ghi và chức năng xóa bản ghi. Sử dụng PHP, MySQL và ajax
Chúng tôi sẽ đi qua các tính năng được liệt kê dưới đây. Tôi đã tìm kiếm rất nhiều nhưng không thể tìm thấy bất kỳ ví dụ nào có các đặc điểm sau
- Liệt kê Bootgrid Sử dụng Ajax
- Danh sách Bootgrid với phía máy chủ tìm kiếm bằng Ajax
- Kích hoạt phân trang ajax
- Bật sắp xếp
- Kích hoạt nút Command với chức năng quan trọng
- Bật phân trang động phía máy chủ
- Thêm bản ghi bằng bootstrap ModalBox và ajax
- Chỉnh sửa bản ghi bằng bootstrap ModalBox và ajax
- Xóa bản ghi bằng cách sử dụng bootstrap ModalBox và ajax
Trong bootgrid, bạn có thể liên kết dữ liệu theo hai cách. phía máy chủ [thông qua dịch vụ REST] để truy vấn nguồn dữ liệu động như cơ sở dữ liệu hoặc phía máy khách [thông qua dữ liệu trong bộ nhớ đơn giản]
jQuery và Bootstrap là các thư viện phụ thuộc của Bootgrid. Chúng ta sẽ tìm hiểu cách sử dụng PHP, MySQL và ajax để thêm, chỉnh sửa và xóa các bản ghi trong bootgrid
Thêm, chỉnh sửa và xóa bản ghi bằng Bootgrid, PHP và MySQL
Tôi đang sử dụng các tệp và thư mục sau
- thư mục dist. Thư mục này sẽ chứa tất cả các lib css và js của jquery, bootstrap và bootgrid
- thư mục phông chữ. Thư mục này sẽ chứa tất cả các tệp liên quan đến phông chữ
- mục lục. php. Tệp này sẽ được sử dụng để tạo bố cục HTML và xử lý phản hồi ajax
- sự liên quan. php. Tập tin này sẽ sử dụng để tạo kết nối cơ sở dữ liệu
- phản ứng. php. Tệp này sẽ sử dụng để xử lý tất cả các chức năng phía máy chủ. Tôi sẽ tạo thêm, chỉnh sửa, xóa các phương thức hành động và trả lại phản hồi json cho phương thức ajax
Ngoài ra, hãy xem các hướng dẫn khác về lưới,
- Ví dụ đơn giản Bootgrid [Phía máy chủ] với PHP, MySQL và Ajax
- Cách thêm, chỉnh sửa và xóa một hàng trong jQuery Flexigrid bằng PHP và MySQL
- Phân trang, sắp xếp và tìm kiếm dữ liệu – Phía máy chủ [PHP/MySQl] bằng Ajax
Cách thêm danh sách trong Bootgrid
Bước 1. Đã tạo tệp kết nối để xử lý kết nối cơ sở dữ liệu và trả về đối tượng kết nối cơ sở dữ liệu
Ở đâu
Liên kết được Tài trợ- tên máy chủ $. Biến này chứa tên máy chủ db MySQL của bạn
- $tên người dùng. Đây là tên người dùng cơ sở dữ liệu MySQL
- $mật khẩu. Đây là mật khẩu cơ sở dữ liệu MySQL
- $dbname. Đây là tên cơ sở dữ liệu MySQL
Bước 2. Bao gồm tất cả các tệp
9 và
0 vào tiêu đề của tệpRecord
Empid Name Salary Age Commands
1Record
Empid Name Salary Age Commands
Bước 3. Đã tạo một bảng HTML để hiển thị dữ liệu danh sách vào tệp
1________số 8Record
Empid Name Salary Age Commands
Ở đây, chúng tôi đã thêm một nút
3 sẽ được sử dụng để tạo một bản ghi mới và một bảng để liệt kê các bản ghiRecord
Empid Name Salary Age Commands
Bước 4. Đã áp dụng phương thức khởi tạo Bootgrid trên bảng HTML. Phương thức Bootgrid biến một bảng HTML thành một danh sách dạng lưới đẹp mắt
4Tôi đã thêm mã jquery ở trên vào cuối tệp
1Liên kết được Tài trợRecord
Empid Name Salary Age Commands
Bước 5. Hãy thêm phương thức xử lý hành động vào tệp
57Record
Empid Name Salary Age Commands
Cách thêm bản ghi chèn vào Bootgrid
Bước 1. Trong tệp
1, tôi đã thêm hộp Bootstrap add modal để thêm bản ghi9Record
Empid Name Salary Age Commands
Bước 2. Để mở hộp thêm phương thức, tôi đã thêm phương thức gọi lại vào nút
7Record
Empid Name Salary Age Commands
function editRow[id] {
if [ 'undefined' != typeof id ] {
$.getJSON['datatable.php?edit=' + id, function[obj] {
$['#edit-id'].val[obj.id];
$['#firstname'].val[obj.name];
$['#email'].val[obj.email];
$['#mobile'].val[obj.mobile];
$['#edit-modal'].modal['show']
}].fail[function[] { alert['Unable to fetch data, please try again later.'] }];
} else alert['Unknown row id.'];
}
1Bước 3. Đã thêm sự kiện nút gửi để thêm giá trị đầu vào theo phương thức
function editRow[id] {
if [ 'undefined' != typeof id ] {
$.getJSON['datatable.php?edit=' + id, function[obj] {
$['#edit-id'].val[obj.id];
$['#firstname'].val[obj.name];
$['#email'].val[obj.email];
$['#mobile'].val[obj.mobile];
$['#edit-modal'].modal['show']
}].fail[function[] { alert['Unable to fetch data, please try again later.'] }];
} else alert['Unknown row id.'];
}
2Bước 4. Đã thêm phương thức
8, sẽ gửi yêu cầu ajax đến máy chủ. Sử dụng công nghệ ajax, chúng tôi sẽ gửi dữ liệu json đến máy chủRecord
Empid Name Salary Age Commands
function editRow[id] {
if [ 'undefined' != typeof id ] {
$.getJSON['datatable.php?edit=' + id, function[obj] {
$['#edit-id'].val[obj.id];
$['#firstname'].val[obj.name];
$['#email'].val[obj.email];
$['#mobile'].val[obj.mobile];
$['#edit-modal'].modal['show']
}].fail[function[] { alert['Unable to fetch data, please try again later.'] }];
} else alert['Unknown row id.'];
}
4Bước 5. Đã thêm tùy chọn chuyển đổi trong tệp
5Record
Empid Name Salary Age Commands
function editRow[id] {
if [ 'undefined' != typeof id ] {
$.getJSON['datatable.php?edit=' + id, function[obj] {
$['#edit-id'].val[obj.id];
$['#firstname'].val[obj.name];
$['#email'].val[obj.email];
$['#mobile'].val[obj.mobile];
$['#edit-modal'].modal['show']
}].fail[function[] { alert['Unable to fetch data, please try again later.'] }];
} else alert['Unknown row id.'];
}
6Bước 6. Trong tệp
5, một phương thức hành động thêm đã được thêm vào sẽ chèn một bản ghi vào cơ sở dữ liệu MySQL và gửi trạng tháiRecord
Empid Name Salary Age Commands
0
Cách thêm Chỉnh sửa bản ghi trong Bootgrid
Bước 1. Đã thêm hộp phương thức chỉnh sửa Bootstrap vào tệp
1 để cập nhật bản ghiRecord
Empid Name Salary Age Commands
1
Bước 2. Đã thêm phương thức gọi lại trong sự kiện của Bootgrid contsructor,
2
Chúng tôi đang thu thập tất cả dữ liệu từ hàng được nhấp mà bạn muốn chỉnh sửa và hiển thị trong hộp phương thức
Bước 3. Để chỉnh sửa các giá trị đầu vào theo phương thức, một sự kiện nhấp vào nút gửi đã được thêm vào
3
Bước 4. Đã thêm tùy chọn chuyển đổi trong tệp
5Record
Empid Name Salary Age Commands
4
Bước 5. Trong tệp
5, một phương thức hành động bổ sung đã được thêm vào sẽ cập nhật bản ghi trong cơ sở dữ liệu MySQL và gửi trạng tháiRecord
Empid Name Salary Age Commands
5
Cách thêm Xóa bản ghi trong Bootgrid
Trước tiên, bạn phải chọn một hàng trong Bootgrid, sau đó nhấp vào biểu tượng nút xóa bản ghi. Mỗi hàng trong Bootgrid có biểu tượng chỉnh sửa và xóa hàng cũng như hành động bị ràng buộc
Liên kết được Tài trợBước 1. Đã thêm xóa phương thức gọi lại trong hàm khởi tạo bootgrid,
6
Bước 2. Đã thêm tùy chọn chuyển đổi trong tệp
5Record
Empid Name Salary Age Commands
7
Bước 3. Trong tệp
5, một phương thức hành động thêm đã được thêm vào sẽ xóa một bản ghi khỏi cơ sở dữ liệu MySQL và gửi trạng tháiRecord
Empid Name Salary Age Commands
8
Bạn có thể tải xuống mã nguồn và Bản demo từ liên kết bên dưới
Bản thử trực tiếp
Tải xuống mã nguồn
Cách sử dụng mã nguồn đã tải xuống
Phần kết luận
Trong hướng dẫn trước, chúng ta đã tìm hiểu danh sách bootgrid với PHP, MySQL và AJAX. Hướng dẫn này giúp thêm chức năng crud với bootgrid bằng cách sử dụng ajax. Tôi đã trình bày về cách thêm, chỉnh sửa và xóa hàng bằng cách sử dụng php, mysql và ajax