jQuery – Lọc dữ liệu trong html table

Trong bài viết này tôi sẽ hướng dẫn cách lọc ví dụ trong table mà không cần thay đổi cấu trúc của tài liệu html, cũng như không cần nạp thêm hoặc xóa bỏ dữ liệu. Ý tưởng thực hiện là tôi sẽ ẩn đi tất cả các dòng và chỉ hiển thị các dòng chứa nội dung cần tìm thông qua hai hàm hide() và show(). Nếu muốn có thể hiệu ứng, bạn cũng có thể dùng các hàm fadeOut(), fadeIn().

Tạo table từ tập tin XML

Với các dữ liệu và hàm có sẵn trong bài: Sử dụng Ajax làm việc với tài liệu XML, tôi sẽ thực hiện lại việc nạp tập tin xml vào một đối tượng xmlDoc, sau đó lặp qua các phần tử con trong đó để tạo table. Table tôi tạo sẵn đã có các tiêu đề cột sau:

<body>
	Search:
	<input id="searchBox" type="text" style="width:200px"></input>
	<p>
	Result:
	</p>
	<table id="myTable" width="700px" border="1">
		<th>Author</th>
		<th>Title</th>
		<th>Genre</th>
		<th>Price</th>
		<th>Publish Date</th>
		<th>Description</th>
	</table>
</body>

Và tôi có đoạn code để tạo table:

var table=$("#myTable");

// create table
$(xmlDoc).find("book").each(function()
{
	var tr="<tr>";
	$(this).children().each(function()
	{
		var td="<td>"+$(this).text()+"</td>";
		tr+=td;
	});
	tr+="</tr>";
	table.append(tr);
});

Lọc dữ liệu

Việc lọc dữ liệu sẽ dựa trên từ khóa mà người dùng gõ vào text box có id là searchBox, sau đó tôi sẽ tìm kiếm từ khóa này trong từng dòng của table (trừ tiêu đề). Hàm text() trên thẻ <tr> sẽ trả về toàn bộ văn bản của các <td> bên trong đó.

Để chọn các dòng (<tr>) của table, tôi sẽ lấy từ vị trí thứ hai trở đi bởi vì dòng tiêu đề luôn được hiển thị. Tôi sử dụng :gt() selector (viết tắt của greater than) để làm điều này với cú pháp $(“tr:gt(0)”). Tuy nhiên, bạn có thể ko sử dụng selector này nếu như đặt các dòng của table vào trong thẻ <tbody>.

Ngoài ra, để chọn các dòng có chứa dữ liệu nào đó, tôi sẽ sử dụng :contains() selector.

Để lọc dữ liệu trong table bạn có thể thực hiện hai cách sau:

Cách 1: Ẩn tất cả dòng dữ liệu đi và hiện lại các dòng chứa dữ liệu khớp với chuỗi tìm kiếm:

$("#searchBox").keyup(function()
{
	$("tr:gt(0)",table).hide();
	$("tr:gt(0):contains('"+this.value+"')",table).show();
});

Cách 2: Lặp qua từng dòng để ẩn/hiện theo dữ liệu

$("#searchBox").keyup(function()
{
	var keyword=this.value;
	$("tr:gt(0)",table).each(function()
	{
		if($(this).text().search(keyword)>-1)
			$(this).fadeIn();
		else
			$(this).fadeOut();
	});
});

Mã trang html hoàn chỉnh

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">

function loadXmlDoc()
{
	return $.ajax({
		type: "GET",
		url: "books.xml",
		dataType: "xml",
		async:false
	}).responseXML;
}

$(function()
{
	var xmlDoc=loadXmlDoc();
var table=$("#myTable");

// create table
$(xmlDoc).find("book").each(function()
{
	var tr="<tr>";
	$(this).children().each(function()
	{
		var td="<td>"+$(this).text()+"</td>";
		tr+=td;
	});
	tr+="</tr>";
	table.append(tr);
});

$("#searchBox").keyup(function()
{
	var keyword=this.value;
	$("tr:gt(0)",table).each(function()
	{
		if($(this).text().search(keyword)>-1)
			$(this).hide();
		else
			$(this).show();
	});
});
});

</script>
</head>
<body>
	Search:
	<input id="searchBox" type="text" style="width:200px"></input>
	<p>
	Result:
	</p>
	<table id="myTable" width="700px" border="1">
		<th>Author</th>
		<th>Title</th>
		<th>Genre</th>
		<th>Price</th>
		<th>Publish Date</th>
		<th>Description</th>
	</table>
</body>
</html>


https://yinyangit.wordpress.com

Advertisements

5 thoughts on “jQuery – Lọc dữ liệu trong html table

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s