Chỉnh sửa bảng HTML trực tiếp hoặc chỉnh sửa bảng nội tuyến là một tính năng rất thân thiện với người dùng, cho phép người dùng chỉnh sửa giá trị bảng HTML trực tiếp bằng cách nhấp vào các ô của bảng. Trong hướng dẫn về bảng HTML trước đây của chúng tôi, bạn đã học Xuất dữ liệu bảng HTML sang Excel, CSV và Văn bản bằng jQuery. Trong hướng dẫn này, bạn sẽ học cách triển khai bảng HTML có thể chỉnh sửa trực tiếp bằng jQuery và PHP. Chúng tôi sẽ sử dụng plugin jQuery Tabledit cung cấp khả năng chỉnh sửa AJAX tại chỗ cho các ô của bảng HTML Show
Ngoài ra, đọc
Chúng tôi sẽ giải thích và trình bày hướng dẫn này theo các bước đơn giản với bản trình diễn trực tiếp để tạo bảng HTML có thể chỉnh sửa và lưu các thay đổi chỉnh sửa trực tiếp vào bảng cơ sở dữ liệu MySQL. Bạn cũng có thể tải xuống mã nguồn của bản demo trực tiếp  Vì chúng tôi đã giới thiệu hướng dẫn này với bản trình diễn trực tiếp để triển khai bảng HTML có thể chỉnh sửa trực tiếp với jQuery và PHP, nên cấu trúc tệp cho ví dụ này như sau DataTables là một thư viện jQuery JavaScript để chuyển đổi bảng HTML đơn giản thành bảng giàu tính năng động jQuery DataTables rất thân thiện với người dùng để liệt kê các bản ghi với tính năng thêm, chỉnh sửa, xóa bản ghi trực tiếp mà không cần làm mới trang. Do đó, DataTables được sử dụng rộng rãi trong ứng dụng web để liệt kê các bản ghi Vì vậy, nếu bạn đang nghĩ đến việc sử dụng jQuery DataTables trong dự án của mình, thì rất dễ dàng. Bạn có thể dễ dàng triển khai jQuery DataTables trong dự án của mình bằng PHP và Ajax Trong hướng dẫn này, bạn sẽ tìm hiểu cách triển khai Trực tiếp Thêm, Chỉnh sửa và Xóa Bản ghi DataTables với Ajax PHP và MySQL Ngoài ra, đọc
Chúng tôi sẽ trình bày hướng dẫn này theo các bước đơn giản để tạo ví dụ trực tiếp cho jQuery DataTables để liệt kê các bản ghi với chức năng thêm, chỉnh sửa và xóa bản ghi trực tiếp. Bạn cũng có thể tải xuống dự án hoàn chỉnh. Liên kết tải xuống nằm ở cuối hướng dẫn Vì chúng tôi sẽ giới thiệu hướng dẫn này với ví dụ trực tiếp về Live Add Edit Delete DataTables Records với Ajax, PHP & MySQL, vì vậy các tệp chính cho ví dụ này như sau
Bước 1. Tạo bảng cơ sở dữ liệu MySQLĐầu tiên chúng ta sẽ tạo các bảng cơ sở dữ liệu MySQL live_records để thêm, chỉnh sửa và xóa các bản ghi CREATE TABLE `live_records` ( `id` int(11) NOT NULL, `name` varchar(255) NOT NULL, `skills` varchar(255) NOT NULL, `address` varchar(255) NOT NULL, `designation` varchar(255) NOT NULL, `age` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; ALTER TABLE `live_records` ADD PRIMARY KEY (`id`); ALTER TABLE `live_records` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT; Bước 2. Liệt kê các bản ghi trong DataTablestrong chỉ mục. php, chúng ta sẽ tạo Table để liệt kê các bản ghi bằng jQuery DataTables <table id="recordListing" class="table table-bordered table-striped"> <thead> <tr> <th>#</th> <th>Name</th> <th>Age</th> <th>Skills</th> <th>Address</th> <th>Designation</th> <th></th> <th></th> </tr> </thead> </table> Chúng tôi sẽ khởi tạo jQuery DataTables trong ajax. js và tạo yêu cầu ajax cho danh sách hành độngRecords để yêu cầu phía máy chủ tìm nạp bản ghi để tải trong DataTables var dataRecords = $('#recordListing').DataTable({
"lengthChange": false,
"processing":true,
"serverSide":true,
'serverMethod': 'post',
"order":[],
"ajax":{
url:"ajax_action.php",
type:"POST",
data:{action:'listRecords'},
dataType:"json"
},
"columnDefs":[
{
"targets":[0, 6, 7],
"orderable":false,
},
],
"pageLength": 10
});
Chúng ta sẽ gọi phương thức listRecords() trên action listRecords để liệt kê các bản ghi $record = new Records();
if(!empty($_POST['action']) && $_POST['action'] == 'listRecords') {
$record->listRecords();
}
Chúng ta sẽ tạo phương thức listRecords() trong lớp Records. php để tìm nạp các bản ghi từ cơ sở dữ liệu MySQL và trả về dưới dạng dữ liệu JSON public function listRecords(){
$sqlQuery = "SELECT * FROM ".$this->recordsTable." ";
if(!empty($_POST["search"]["value"])){
$sqlQuery .= 'where(id LIKE "%'.$_POST["search"]["value"].'%" ';
$sqlQuery .= ' OR name LIKE "%'.$_POST["search"]["value"].'%" ';
$sqlQuery .= ' OR designation LIKE "%'.$_POST["search"]["value"].'%" ';
$sqlQuery .= ' OR address LIKE "%'.$_POST["search"]["value"].'%" ';
$sqlQuery .= ' OR skills LIKE "%'.$_POST["search"]["value"].'%") ';
}
if(!empty($_POST["order"])){
$sqlQuery .= 'ORDER BY '.$_POST['order']['0']['column'].' '.$_POST['order']['0']['dir'].' ';
} else {
$sqlQuery .= 'ORDER BY id DESC ';
}
if($_POST["length"] != -1){
$sqlQuery .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$stmt = $this->conn->prepare($sqlQuery);
$stmt->execute();
$result = $stmt->get_result();
$stmtTotal = $this->conn->prepare("SELECT * FROM ".$this->recordsTable);
$stmtTotal->execute();
$allResult = $stmtTotal->get_result();
$allRecords = $allResult->num_rows;
$displayRecords = $result->num_rows;
$records = array();
while ($record = $result->fetch_assoc()) {
$rows = array();
$rows[] = $record['id'];
$rows[] = ucfirst($record['name']);
$rows[] = $record['age'];
$rows[] = $record['skills'];
$rows[] = $record['address'];
$rows[] = $record['designation'];
$rows[] = '<button type="button" name="update" id="'.$record["id"].'"
class="btn btn-warning btn-xs update">Update</button>';
$rows[] = '<button type="button" name="delete" id="'.$record["id"].'"
class="btn btn-danger btn-xs delete" >Delete</button>';
$records[] = $rows;
}
$output = array(
"draw" => intval($_POST["draw"]),
"iTotalRecords" => $displayRecords,
"iTotalDisplayRecords" => $allRecords,
"data" => $records
);
echo json_encode($output);
}
Bước 3. Xử lý Thêm bản ghi mớitrong chỉ mục. php, chúng ta sẽ tạo phương thức Bootstrap để thêm các bản ghi mới vào jQuery DataTables <div id="recordModal" class="modal fade"> <div class="modal-dialog"> <form method="post" id="recordForm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title"><i class="fa fa-plus"></i> Add Record</h4> </div> <div class="modal-body"> <div class="form-group" <label for="name" class="control-label">Name</label> <input type="text" class="form-control" id="name" name="name" placeholder="Name" required> </div> <div class="form-group"> <label for="age" class="control-label">Age</label> <input type="number" class="form-control" id="age" name="age" placeholder="Age"> </div> <div class="form-group"> <label for="lastname" class="control-label">Skills</label> <input type="text" class="form-control" id="skills" name="skills" placeholder="Skills" required> </div> <div class="form-group"> <label for="address" class="control-label">Address</label> <textarea class="form-control" rows="5" id="address" name="address"></textarea> </div> <div class="form-group"> <label for="lastname" class="control-label">Designation</label> <input type="text" class="form-control" id="designation" name="designation" placeholder="Designation"> </div> </div> <div class="modal-footer"> <input type="hidden" name="id" id="id" /> <input type="hidden" name="action" id="action" value="" /> <input type="submit" name="save" id="save" class="btn btn-info" value="Save" /> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </form> </div> </div> Chúng tôi sẽ xử lý việc gửi biểu mẫu phương thức bằng jQuery và thực hiện yêu cầu Ajax bằng hành động addRecord để thêm bản ghi mới $("#recordModal").on('submit','#recordForm', function(event){
event.preventDefault();
$('#save').attr('disabled','disabled');
var formData = $(this).serialize();
$.ajax({
url:"ajax_action.php",
method:"POST",
data:formData,
success:function(data){
$('#recordForm')[0].reset();
$('#recordModal').modal('hide');
$('#save').attr('disabled', false);
dataRecords.ajax.reload();
}
})
});
Chúng tôi sẽ gọi phương thức addRecord() trên hành động addRecord để thêm bản ghi mới $database = new Database();
$db = $database->getConnection();
$record = new Records($db);
if(!empty($_POST['action']) && $_POST['action'] == 'addRecord') {
$record->name = $_POST["name"];
$record->age = $_POST["age"];
$record->skills = $_POST["skills"];
$record->address = $_POST["address"];
$record->designation = $_POST["designation"];
$record->addRecord();
}
Chúng ta sẽ tạo phương thức addRecord() trong lớp Records. php để thêm bản ghi mới vào cơ sở dữ liệu MySQL ________số 8_______Bước 4. Xử lý bản ghi cập nhậtChúng tôi sẽ xử lý chức năng cập nhật bản ghi bằng cách điền các giá trị bản ghi để cập nhật biểu mẫu phương thức bằng cách yêu cầu Ajax thực hiện hành động getRecord để tải các giá trị vào đầu vào biểu mẫu phương thức $("#recordListing").on('click', '.update', function(){
var id = $(this).attr("id");
var action = 'getRecord';
$.ajax({
url:'ajax_action.php',
method:"POST",
data:{id:id, action:action},
dataType:"json",
success:function(data){
$('#recordModal').modal('show');
$('#id').val(data.id);
$('#name').val(data.name);
$('#age').val(data.age);
$('#skills').val(data.skills);
$('#address').val(data.address);
$('#designation').val(data.designation);
$('.modal-title').html(" Edit Records");
$('#action').val('updateRecord');
$('#save').val('Save');
}
})
});
Chúng ta sẽ gọi phương thức updateRecord() từ lớp Records. php để cập nhật bản ghi <table id="recordListing" class="table table-bordered table-striped"> <thead> <tr> <th>#</th> <th>Name</th> <th>Age</th> <th>Skills</th> <th>Address</th> <th>Designation</th> <th></th> <th></th> </tr> </thead> </table>0 Chúng ta sẽ tạo phương thức updateRecord() trong lớp Records. php để cập nhật các bản ghi vào bảng cơ sở dữ liệu MySQL <table id="recordListing" class="table table-bordered table-striped"> <thead> <tr> <th>#</th> <th>Name</th> <th>Age</th> <th>Skills</th> <th>Address</th> <th>Designation</th> <th></th> <th></th> </tr> </thead> </table>1 Bước5. Xử lý Xóa Bản ghiChúng tôi sẽ xử lý chức năng xóa bản ghi bằng cách thực hiện yêu cầu ajax với hành động xóaRecord để xóa bản ghi khỏi bảng cơ sở dữ liệu MySQL <table id="recordListing" class="table table-bordered table-striped"> <thead> <tr> <th>#</th> <th>Name</th> <th>Age</th> <th>Skills</th> <th>Address</th> <th>Designation</th> <th></th> <th></th> </tr> </thead> </table>2 Chúng ta sẽ gọi phương thức deleteRecord() từ lớp Records. php trên hành động deleteRecord để xóa bản ghi <table id="recordListing" class="table table-bordered table-striped"> <thead> <tr> <th>#</th> <th>Name</th> <th>Age</th> <th>Skills</th> <th>Address</th> <th>Designation</th> <th></th> <th></th> </tr> </thead> </table>3 Chúng ta sẽ tạo phương thức deleteRecord() trong lớp Records. php để xóa các bản ghi vào bảng cơ sở dữ liệu MySQL Làm cách nào để chỉnh sửa bảng dữ liệu trong PHP? |
