DragDrop table cùng với ajax + JQuery UI + PHP

PHP & MySQL 08/10/2017 07:00 765
Trong bài viết này mình sẽ hướng dẫn các bạn xây dựng chức năng kéo thả DragDrop của JQuery UI kết hợp cùng với Ajax, HTML & PHP.

Thực ra trên mạng cũng có nhưng phần lớn mọi người làm bằng ui,li và sử dụng những cách rất khó hiểu. Thì trong bài viết này mình sẽ hướng dẫn các bạn sử dụng Table.

Chúng ta cùng bắt đầu nào.

Trong ví dụ này mình chúng ta sẽ tách làm 3 file.

  • index.php
  • ajax.php // Cập nhật thông tin
  • dbconfig.php // Thông tin của database và tạo kết nối

1. Include vào một số file cần thiết. 

Trong nội dung bài viết này ngoài JQuery, JQueryUI thì mình sẽ sử dụng thêm Bootstrap.

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700" media="all">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

2. File dbconfig.php

<?php 
	 // Turn off errors
	ini_set('display_errors', 0);
	error_reporting(0);
	
	// Infomation connect to database
	define("DB_HOST", "localhost");
	/** The name of the database */
	define("DB_NAME", "demo");
	/** MySQL database username */
	define("DB_USER", "root");
	/** MySQL database password */
	define("DB_PASS", "");
	
	// Kết nối database
	$dbconn = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
	// Check connection to DB
	if(!$dbconn){
		 die("Kết nối thất bại: " . mysqli_connect_error());
	}
	if(!mysqli_set_charset($dbconn, 'utf8')){
		die("Lỗi trong quá trình tải utf8: " . mysqli_errno($dbconn));
	}
?>

Chúng ta sẽ di chuyển sang file index.php và include file dbconfig.php vào nhé.

Trong CSDL mình đã tạo sẵn một bảng có tên là dragdrop(id, title, order_no)

require('dbconfig.php');

Tiếp theo mình sẽ insert một số record mẫu nhé.

$data = array(
	'Check – Uncheck tất cả input checkbox với JQuery',
	'Backup và Restore cơ sở dữ liệu MySQL Dump bằng PHP',
	'Nén danh mục và tự động tải xuống bằng Zip',
	'10 Thư viện PHP mà bất kỳ ai cũng không thể bỏ qua',
	'Vì sao nên chọn MySQL 5.7?',
	'Call, Apply và Bind trong JavaScript',
	'Tích hợp google reCAPTCHA vào website',
	'Tạo notification realtime cùng với Firebase + Javascript và JQuery',
	'Firebase cùng Javascript và JQuery',
	'Hàm có sẵn thông dụng trong PHP'
);
for($i=0; $i < count($data); $i++){
	mysqli_query($dbconn,"INSERT INTO dragdrop(title, order_no) VALUES('".addslashes($data[$i])."','".($i+1)."')");
}

Tiếp theo chúng ta lấy hết dữ liệu trong bảng dragdrop và đổ dữ liệu ra một table. Mình sẽ code ngắn gọn như sau. Và mình có tạo thêm một thẻ div#message để hiển thị thông báo khi chúng ta di chuyển và cập nhật thành công.

// Câu lệnh truy vấn
$sql = "SELECT * FROM dragdrop ORDER BY order_no ASC";

// Thực thi câu truy vấn và gán kết quả và biến $lstDragDrop
$lstDragDrop = mysqli_query($dbconn, $sql);

// Kiểm tra số lượng record trả về có lơn hơn 0
if (mysqli_num_rows($lstDragDrop) > 0){
	echo '<table id="sortable" class="table table-striped" border="0" cellpadding="0" cellspacing="0">
	<thead><tr>
		<td align="center" class="gridheader">ID.</td>
		<td class="gridheader">Tiêu đề bài viết</td>
		<td align="center" class="gridheader">OrderNo.</td>
	</tr></thead>
	<tbody>';
   // Sử dụng vòng lặp while để lặp kết quả
	while($row = mysqli_fetch_assoc($lstDragDrop)) {
		echo '<tr id="Row_'.$row['id'].'" class="ui-state-default">
			<td align="center">'.$row['id'].'</td>
			<td>'.$row['title'].'</td>
			<td align="center">'.$row['order_no'].'</td>
		</tr>';
	}
	echo '</tbody></table>
	<div id="message" style="display:none; color:red"></div>';
}
// ngắt kết nối
mysqli_close($dbconn);

Lưu ý: Mình lưu ý với các bạn nhé các bạn phải đặt cho mình mỗi Row một cái id như trên nhé. Nghĩa là một từ khóa bất kỳ + giá trị khóa chính của từng Row kiểu [Key_id].

3. Javascript code.

Chúng ta sẽ sử dụng plugin sortable của JQueryUI nhé. Và các bạn chú ý selector của mình là  #sortable tbody. Có nhiều bạn để là #table là không được đâu khi đó lúc kéo là nó kéo cả table đó. Mỗi khi người sử dụng cầm một Row di chuyển và thả da thì chúng ta sẽ gọi tới hàm update của  sortable nhé.

<script type="text/javascript">
	$(document).ready(function(){
		$("#sortable tbody").sortable({
			update: function(event, ui){
				$(this).children().each(function(index) {
					$(this).find('td').last().html(index + 1)
				});
				/* ajax save */
				var $_adata = $(this).sortable("serialize");
				$.post("ajax.php?action=update", $_adata, function(html){
					$('div[id^=message]')
						.text('Cập nhật thành công !!')
						.fadeIn()
						.delay(2000)
						.fadeOut();
				});
			}	
		}).disableSelection();
	});
</script>

4. File ajax.php.

Như mình đã nói ở trên thì file ajax.php sẽ được gọi và thực thi thông qua hàm update khi người sử dụng kéo và thả da. Bằng việc đặt ID cho từng Row mình sẽ có được một dãy tham số từ hàm update truyền sang file ajax như sau.

Row[]=4&Row[]=10&Row[]=1&Row[]=5&Row[]=3&Row[]=6&Row[]=2&Row[]=7&Row[]=8&Row[]=9

Khi đó trong file ajax.php mình chỉ cần hứng các giá trị này và update vào CSDL.

<?php 
	require('dbconfig.php');
	
	// Cập nhật lại thứ tự sau khi di chuyển 
	if(isset($_GET['action']) && $_GET['action']=='update'){
		$Row = $_POST['Row'];
		for($i=0; $i<count($Row); $i++){
			mysqli_query($dbconn, "UPDATE dragdrop SET order_no='".($i+1)."' WHERE id='".$Row[$i]."'");
		}
	}
	echo(1); die();
?>

5. Kết luận.

Hy vọng với bài viết nhỏ này có thể giúp phần nào làm chủ được JQuery nói chung và JQueryUI nói riêng nhé. Thanks

Xem Thêm

Profile photo of adminTheHalfHeart

B.V.T

Sinh ra và lớn nên ở Bắc Giang. Hiện tại thì tôi đang là một lập trình viên tại VietISO. Tôi lập website này với mục đích là bookmark những gì tôi đã đọc qua và mong muốn chia sẻ những gì tôi biết.