Người Viết : ViKiMi Editor

Xây dựng Website có khả năng tìm kiếm và lọc dữ liệu được tốt luôn là một đòi hỏi các nhà phát triển Website cần nghiên cứu các cách hữu hiệu. Yêu cầu của tìm kiếm dữ liệu đó là thông tin phải được tìm kiếm nhanh nhất, thời gian tìm kiếm càng ít thì càng tăng khả năng Load trang Web.
Với những Website có thời gian Load càng nhanh thì trang Web đó hoạt động càng hiệu quả, còn với những Website quá nặng nề thì theo thời gian sẽ dần rơi vào trạng thái hoạt động kém hiệu quả. Cải thiện tốc độ Website là một yêu cầu bức thiết.
Bootstrap cũng hỗ trợ khả năng Filter dữ liệu khá hiệu quả. Điều này cho phép tìm kiếm dữ liệu tốt hơn so với các cách thông thường. Vì Bootstrap hỗ trợ tìm kiếm ngay trực tiếp trên giao diện của người dùng nên tốc độ sẽ nhanh hơn.
A. THỰC HIỆN TÌM KIẾM VỚI MỘT DỮ LIỆU BẤT KỲ.
Chúng ta sẽ thực hiện tìm kiếm một dữ liệu bất kỳ được hiển thi trên giao diện người dùng. Cụ thể là sẽ thực hiện tìm kiếm dữ liệu bên trong một khung chứa <Div>.
Kịch Bản : Chúng ta lấy dữ liệu từ Cơ Sở Dữ Liệu lên giao diện Website. Các dữ liệu thông tin này được chứa vào bên trong một khung chứa là Thẻ DIV.
Bây giờ, để tìm kiếm dữ liệu theo yêu cầu người dùng; thay vì chúng ta tìm dữ liệu trực tiếp trong Cơ Sở Dữ Liệu, thì chúng ta sẽ chỉ thực hiện tìm kiếm trên giao diện người dùng để tăng tốc độ xử lý. Vì chúng ta biết rằng tìm kiếm trực tiếp trong Cơ Sở Dữ Liệu sẽ lâu hơn.
Chúng ta sẽ chỉ thực hiện tìm kiếm dữ liệu dựa trên các dữ liệu đã hiển thị trong thẻ Div. Việc tìm kiếm này là ngay trên giao diện phía người dùng, chắc chắn sẽ nhanh hơn. Bootstrap Filters sẽ giúp chúng ta làm điều này.
Bootstrap Framework sẽ thực hiện Filters dữ liệu bên trong khung chứa <Div>, kiểm tra xem có dữ liệu nào khớp với dữ liệu đang thực hiện tìm kiếm không? Nếu dữ liệu không khớp với với dữ liệu tìm kiếm thì nó sẽ không cho hiển thị nữa bằng cách thiết lập ( display : none ).
HTML & Bootstrap :
Chúng ta mô phỏng rằng dữ liệu tại Cơ Sở Dữ Liệu đã được Load lên phía giao diện người dùng.
<body>
<div class="container">
<h2>THỰC HIỆN LỌC DỮ LIỆU BẤT KỲ BẰNG BOOTSTRAP</h2>
<p>Nhập dữ liệu tìm kiếm vào ô tìm kiếm Search để thực hiện tìm kiếm các Text có bên trong Div có id="DIV-Search":</p>
<input class="form-control" id="INPUT-Search" type="text" placeholder="Search...">
<div id="DIV-Search">
<p>Khối Dữ liệu hiển thị 1 - Bên trong một Paragraph.</p>
<div>Khối ữ liệu hiển thị 2 - Bên trong một Div.</div>
<button class="btn">Khối Dữ liệu hiển thị 3 - Bên trong một Button.</button>
<button class="btn btn-info">Khối Dữ liệu hiển thị 4 - Bên trong một Button.</button>
<p>Khối Dữ liệu hiển thị 5 - Bên trong một Paragraph khác.</p>
</div>
</div>
<!—Đoạn code với jQuery -->
<script>
$(document).ready(function(){
$("#INPUT-Search").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#DIV-Search *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
Giải thích đoạn Mã code :
Chúng ta sử dụng đoạn mã code jQuery để thực hiện vòng lặp qua các phần tử con của Div có id = “DIV-Search” để kiểm tra xem có giá trị nào trùng với dữ liệu tìm kiếm được nhập ở ô Search không?
+ Phương thức toggle() sẽ ẩn đi những phần tử không khớp với thông tin tìm kiếm bằng cách thực hiện display:none.
Và những phần tử khớp thì vẫn sẽ được hiển thị.
+ Phương thức toLowerCase() để convert tất cả sang định dạng chữa thường nhằm thực hiện tìm kiếm tốt hơn.
Với cách thức tìm kiếm trên giao diện người dùng như vậy thì sẽ tăng tốc độ tìm kiếm và giảm thời gian tìm kiếm, đem lại hiệu quả cao hơn.
KẾT QUẢ TÌM KIẾM


B. THỰC HIỆN TÌM KIẾM DỮ LIỆU TRONG MỘT BẢNG TABLE
Chúng ta sẽ tiếp tục tìm kiếm dữ liệu trong một bảng thông tin. Các thông tin của bảng này đều được lấy dữ liệu từ cơ sở dữ liệu. Chúng ta chỉ tìm kiếm trên giao diện phía người dùng.
Kịch bản : Cũng tương tự như bên trên
Bootstrap Framework sẽ thực hiện Filters dữ liệu bên trong bảng thông tin <Table>, kiểm tra xem có dữ liệu nào khớp với dữ liệu đang thực hiện tìm kiếm không? Nếu dữ liệu không khớp với với dữ liệu tìm kiếm thì nó sẽ không cho hiển thị nữa bằng cách thiết lập ( display : none ).
HTML & Bootstrap :
Chúng ta mô phỏng rằng dữ liệu tại Cơ Sở Dữ Liệu đã được Load lên phía giao diện người dùng.
<body>
<div class="container">
<h2>THỰC HIỆN LỌC DỮ LIỆU TRÊN MỘT BẢNG TABLE BẰNG BOOTSTRAP</h2>
<p>Nhập dữ liệu tìm kiếm vào ô tìm kiếm Search để thực hiện tìm kiếm các Text có bên trong Table chứa tbody có id="TABLE-Search":</p>
<input class="form-control" id="INPUT-Search" type="text" placeholder="Search...">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Công Ty</th>
<th>Mã Cổ Phiếu</th>
<th>Website Công Ty</th>
</tr>
</thead>
<tbody id="TABLE-Search">
<tr>
<td>Nhà Đất Hoàn Cầu</td>
<td>HCC</td>
<td>hcc.lands.com</td>
</tr>
<tr>
<td>Mua bán Groups</td>
<td>MGO</td>
<td>muabangroups.ltd.com</td>
</tr>
<tr>
<td>Cà Phê DooMon</td>
<td>DOO</td>
<td>DooMon.ltd.com</td>
</tr>
<tr>
<td>Nông Sản Tick</td>
<td>TIK</td>
<td>nongsantick.on.com</td>
</tr>
</tbody>
</table>
<p>Chúng ta chỉ thực hiện tìm kiếm trên tbody để tránh tìm kiếm trên Tiêu đề của Table</p>
</div>
<script>
$(document).ready(function(){
$("#INPUT-Search").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#TABLE-Search tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
Giải thích đoạn Mã code :
Chúng ta sử dụng đoạn mã code jQuery để thực hiện vòng lặp qua các hàng row của Table ( tbody id=”TABLE-Search” ) để kiểm tra xem có giá trị nào trùng với dữ liệu tìm kiếm được nhập ở ô Search không?
+ Phương thức toggle() sẽ ẩn đi những row chứa thông tin không khớp với thông tin tìm kiếm, bằng cách thực hiện display:none.
Và những row khớp thì vẫn sẽ được hiển thị.
+ Phương thức toLowerCase() để convert tất cả sang định dạng chữa thường nhằm thực hiện tìm kiếm tốt hơn.
Với cách thức tìm kiếm trên giao diện người dùng như vậy thì sẽ tăng tốc độ tìm kiếm và giảm thời gian tìm kiếm, đem lại hiệu quả cao hơn.
KẾT QUẢ TÌM KIẾM


CÁCH THỰC HIỆN TÌM KIẾM LỌC DỮ LIỆU CỦA BOOTSTRAP CÓ VẺ KHÁ ĐƠN GIẢN NHƯNG LẠI ĐEM LẠI NHỮNG HIỆU QUẢ HỮU ÍCH KHI CẦN. CÁC THÔNG TIN CÓ THỂ TÌM KIẾM NHANH NHẤT NHỜ VIỆC THỰC HIỆN TÌM KIẾM NGAY TRÊN GIAO DIỆN PHÍA NGƯỜI DÙNG, VÀ KHÔNG PHẢI TÌM KIẾM DỮ LIỆU TRONG CƠ SỞ DỮ LIỆU TẠI SERVER WEBSITE. CÁCH TÌM KIẾM NÀY GIÚP CẢ THIỆN TỐC ĐỘ VÀ KHẢ NĂNG LOAD WEBSITE TỐT HƠN.
TÌM KIẾM LỌC DỮ LIỆU VỚI BOOTSTRAP TƯƠNG ĐỐI HIỆU QUẢ !