tablesorter - Flexible client side Table Sorting

สำหรับบทความนี้ผมอยากจะมาแนะนำเกี่ยวกับ jQuery Plugin ตัวนึงที่มีชื่อว่า tablesorter ซึ่งมีหน้าที่ในการปรับปรุงความสามารถของ Table ให้สามารถ Sort ได้ โดยเขียน Code แค่ไม่กี่บรรทัด ตาม Style ของ jQuery เดี๋ยวลองมาดูตัวอย่างการใช้งานกันนะครับ

เริ่มต้นด้วยการเรียกใช้งาน jQuery กับ tablesorter กันก่อน

<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

ส่วน HTML tag สำหรับ Table ของเรา ก็หน้าตาประมาณนี้ครับ

<table id="myTable" class="tablesorter">
<thead>
<tr>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Email</th>
    <th>Due</th>
    <th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Smith</td>
    <td>John</td>
    <td>jsmith@gmail.com</td>
    <td>$50.00</td>
    <td>http://www.jsmith.com</td>
</tr>
<tr>
    <td>Bach</td>
    <td>Frank</td>
    <td>fbach@yahoo.com</td>
    <td>$50.00</td>
    <td>http://www.frank.com</td>
</tr>
<tr>
    <td>Doe</td>
    <td>Jason</td>
    <td>jdoe@hotmail.com</td>
    <td>$100.00</td>
    <td>http://www.jdoe.com</td>
</tr>
<tr>
    <td>Conway</td>
    <td>Tim</td>
    <td>tconway@earthlink.net</td>
    <td>$50.00</td>
    <td>http://www.timconway.com</td>
</tr>
</tbody>
</table>

คราวนี้มาถึงส่วนสำคัญ คือ การเรียกใช้งาน tablesorter สามารถเรียกใช้งานได้ดังนี้ครับ

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

ในกรณีที่ต้องการตั้งค่าการ Sorting ไว้ล่วงหน้า ก็สามารถทำได้ โดยกำหด options เพิ่มเติมดังนี้

$(document).ready(function() 
    { 
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
); 

คราวนี้เมื่อ Table แสดงผล ข้อมูลก็จะถูกเรียงลำดับไว้เรียบร้อย โดยใน Code ที่แสดงให้ดู กำหนดไว้ว่า ให้เรียงลำดับข้อมูลใน columns ที่ 0 และ 1 โดยเรียงในแบบ ascending ครับ

สำหรับผู้ที่สนใจ สามารถศึกษาเพิ่มเติมได้ที่ http://tablesorter.com