Sorting Tables with Tablesorter

Bài đăng này đã không được cập nhật trong 7 năm

Khi tạo một trang web, chắc hẳn các bạn đã làm việc rất nhiều với table, và công việc sắp xếp(sort) theo các cột của table mang đến cho bạn khá nhiều khó khăn, và tiêu tốn của bạn không ít thời gian. Hôm nay tôi sẽ giới thiệu đến các bạn công cụ hỗ trợ việc sắp xếp table theo giá trị các cột theo ý muốn một cách nhanh gọn và hiệu quả - tablesorter. Tablesorter là một plugin jQuery đơn giản hỗ trợ sorting rows dựa trên giá trị của một hoặc nhiều columns và cũng cung cấp khả năng phân trang bảng bằng cách sử dụng các phần tử của HTML.

Bắt đầu với Tablesorter

Với Tablesorter bạn có thể ứng dụng vào nhiều nền tảng, ở đây, tôi sẽ hướng dẫn cách cài đặt và một số cách sử dụng phổ biến khi dùng tablesorter trong project Ruby on Rails. Trong Rails, bạn có thể sử dụng như một plugin jQuery bình thường, hoặc có thể sử dụng gem của tablesorter cho Rails đó là jquery-tablesorter. Với cách cài đặt bằng Gem sẽ nhanh gọn hơn một chút:

Gemfile
gem 'jquery-tablesorter'

sau đó chạy lệnh: bundle install hoặc cài đặt bằng gem install: gem install jquery-tablesorter

(Yêu cầu Rails >= 3.2, ruby 1.9.3 - 2.4 )

application.js
//= require jquery-tablesorter

Nếu viết như trên, sẽ require tất cả các core jquery-tablesorter files. Chú ý rằng cách viết này chỉ load nhữngcore-widgets. Hoặc nếu không thích bạn có thể require các files core theo cách viết khác:

//= require jquery-tablesorter/jquery.metadata
//= require jquery-tablesorter/jquery.tablesorter
//= require jquery-tablesorter/jquery.tablesorter.widgets
//= require jquery-tablesorter/addons/pager/jquery.tablesorter.pager
//= require jquery-tablesorter/widgets/widget-repeatheaders
//= require jquery-tablesorter/parsers/parser-metric
//= require jquery-tablesorter/extras/jquery.quicksearch
//= require jquery-tablesorter/beta-testing/pager-custom-controls

Load css:

application.css
/*
 *= require jquery-tablesorter/<theme name>
 */

theme name có thể là:

theme.black-ice
theme.blue
theme.bootstrap
theme.bootstrap_2
theme.dark
theme.default
theme.dropbox
theme.green
theme.grey
theme.ice.css (file extension required due to sprockets, see issue #3)
theme.jui
theme.metro-dark

Pager theme:

/*
 *= require jquery-tablesorter/addons/pager/jquery.tablesorter.pager
 */

Nếu bạn không muốn cài đặt như một gem thì có thể thực hiện như sau:

sudo apt-get install jquery.tablesorter # với ubuntu

css:

<link rel="stylesheet" href="css/theme.default.css" />

import tablesorter bên dưới thư viện jQuery:

<script src="path/to/jquery.js"></script>
<script src="js/jquery.tablesorter.min.js"></script>

Config và khởi tạo cho tablesorter:

Xong bước cài đặt, bây giờ hãy config và customize cho tablesorter trong project của bạn.

Trước tiên hãy tạo một table với HTML:

<table id="myTable" class="tablesorter">
 <thead>
   <th>Stt</th>
   <th>Name</th>
   <th>Age</th>
   <th>Company</th>
 </thead>>
 <tbody>
   <tr>
     <td>1</td>
     <td>Alice</td>
     <td>23</td>
     <td>MTP corp</td>
   </tr>
   <tr>
     <td>2</td>
     <td>Paul</td>
     <td>26</td>
     <td>Sixsau Corp</td>
   </tr>
   <tr>
     <td>3</td>
     <td>Bean</td>
     <td>28</td>
     <td>Tean Asg</td>
   </tr>
   <tr>
     <td>4</td>
     <td>David</td>
     <td>31</td>
     <td>ABCD bank</td>
   </tr>
 </tbody>
</table>

Áp dụng tablesorter cho table ta vừa tạo ra:

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
);

Bạn cũng có thể áp dụng cho tất cả các table bằng cách:

$('table').tablesorter();

hoặc chỉ chọn những table bên trong một selector nào đó:

$('selector').addClass('tablesorter');
$('.tablesorter').tablesorter();

Setting thứ tự sắp xếp mặc định cho tablesorter:

Đôi khi bạn muốn table của bạn được sắp xếp theo một thứ tự nhất định hoặc mặc định là sẽ in ra và được sắp xếp theo cột nào trước, tablesorter cho phép bạn làm điều này một cách dễ dàng. Thuộc tính sortList cho phép bạn định nghĩa những cột nào sẽ được mặc định sắp xếp, đầu vào của sortList là một mảng các mảng(2D array) chỉ mục cho cột cần sắp xếp, phần tử đầu tiên là chỉ số của cột cần sắp xếp (bắt đầu từ 0 là cột đầu tiên), phần tử thứ hai là thứ tự sắp xếp của cột đó, 0 là sắp xếp tăng dần giá trị (ascending order), 1 là sắp xếp giảm dần ( descending order ). Ví dụ bạn muốn sắp xếp cho cột đầu tiên theo thứ tự tăng dần, và cột thứ 3 theo giá trị giảm dần thì có thể viết:

$('table').tablesorter({
   sortList: [[0, 0], [2, 1]]
});

Thay đổi theme mặc định

<link rel="stylesheet" href="css/theme.default.css" />

Bằng:

<link rel="stylesheet" href="css/theme.blue.css" />

Áp dụng cho gem của rails là:

/*
 *= require jquery-tablesorter/them.blue
 */

Hoặc khi khởi tạo bằng js:

$('.tablesorter').tablesorter({theme: 'blue' })

Add thêm Stripes cho table

Để tăng khả năng nhận biết khi đọc table, ta thường thêm hiệu ứng hai màu đậm/nhạt cho các dòng liên tiếp của table, để làm điều này với tablesorter, bạn có thể add thêm thuộc tính gọi là widgets cho table, giá trị là zebra:

$('table').tablesorter({
   widgets: ['zebra']
});

Add thêm widget mới cho table:

Bạn muốn thêm một chức năng mới cho table thì có thể sử dụng thêm chức năng mở rộng cho table này.

$.tablesorter.addWidget({ 
   // đặt id cho widget mới
    id: "idNewWidget",  
    // format sẽ được gọi khi khởi tạo và khi sorting kết thúc 
    format: function(table) {   // (*)
        // do something
    }
  })

// gọi widgets của table
$("table").tablesorter({ 
    widgets: ['zebra','repeatHeaders'] 
});

các thuộc tính của paramester table ở (*) thông thường là: headers: table.headers bodies: table.tBodies ... Xem thêm các example options tại tablesorter example

Paging Data

Phân trang với tablesorter bằng tablesorterPager Giả sử tôi có phần html cho phần phân trang:

<div id="pager" class="pager"> 
   <img src="addons/pager/icons/first.png" class="first"/> 
   <img src="addons/pager/icons/prev.png" class="prev"/> 
   <span class="pagedisplay"></span>
   <img src="addons/pager/icons/next.png" class="next"/> 
   <img src="addons/pager/icons/last.png" class="last"/> 
   <select class="pagesize" title="Select page size"> 
      <option selected="selected" value="2">2</option> 
      <option value="3">3</option>
      <option value="4">4</option>
   </select>
   <select class="gotoPage" title="Select page number"></select>
</div>

Thêm phần phân trang vào cho table:

$(document).ready(function() { 
    $("table") 
    .tablesorter({widthFixed: true, widgets: ['zebra']}) 
    .tablesorterPager({container: $("#pager")}); 
});