Trình bày dữ liệu với Compass Datagrid

Đăng bởi supernovice trong mục Hướng dẫn vào 10 tháng 6, 2010 | Comments

Compass Datagrid - plugin của jQuery giúp sắp xếp các mảng dữ liệu đã được xử lý với Ajax vào bên trong một datagrid

Compass Datagrid hoạt động đơn giản là đưa ra một table trống sau đó gửi các yêu cầu đến server-side script thông qua Ajax, sau đó một đọan mã trên server sẽ định dạng lại dữ liệu kiểu JSON và cập nhật vào trong table

Datagrid này hỗ trợ phân trang với các nút về trước-về sau, đầu tiên-cuối cùng, và một list box có thể lựa chọn một trang bất kì.

Hơn thế nữa plugin này còn giúp chúng ta dễ dàng sắp xếp (sort) các cột, ẩn bất kì cột nào, refresh lại dữ liệu với một cú click và có thể hoạt động với bất cứ ngôn ngữ lập trình nào.

Cách sử dụng :

Chèn đọan code này vào thẻ head

<!-- jquery 1.3 trở lên -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.compassdatagrid.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {  		
  $(".browseTable").compassDatagrid({
    images: 'images/',  			
    url: 'pageData.php'  		
  });  	
});  
</script>

Trong body của file html :

<table class="browseTable">
<tbody>
  <tr>
  	<td></td>
  </tr>
</tbody>
</table>  		  
<!-- Nếu bạn sử dụng Resizer -->  
<div id="ctResizer"></div>

Ngoài ra Compass Datagrid còn có nhiều option cho các bạn tùy chỉnh. Bạn co thể vào đây để xem thêm

Bạn có thích bài viết này?

supernovice's picture

supernovice

Phạm Văn Du - Web developer , SEO Guru tại Bình Dương

Trang chủ - Twitter