Skip navigation.
Home
Chiang Mai Dev Hub
Home

jQuery:: Sort table

Submitted by Shikima on Tue, 20/07/2010 - 01:01

สวัสดีอีกครั้งหลังจากเจ็บตัวไปกับบอลโลกกินปลาหมึกย่างกันเป็นอาทิตย์ แหม... มันช่างแม่นเสียจริงๆ ทำเอาหลายๆ คนเซ็งกันเลย ดีนะที่ทายเฉพาะเยอรมัน ถ้าทายทุกๆ คู่แล้วถูกหมด สงสัยเจ้าพอลคงอยู่ในโลกนี้ไม่ได้แน่ๆ เลย (โดนจับกินซะก่อน)

นอกเรื่องกันแหละ แต่ช่วงนี้พุงออกเพราะปลาหมึกจริงๆ นะ...​ ผมคิดว่าหลายๆ ท่านที่เขียนเว๊ปคงเคยได้เขียนรายงานแสดงอะไรสักอย่างที่ต้องใช้ตารางแน่ๆ แล้วทีนี้ถ้าต้องการให้ค่าในตารางเรียงจากมากไปน้อย หรือน้อยไปมากละ จะทำยังไง ถ้าหากเราเชื่อมต่อกับฐานข้อมูลเราก็แค่เปลี่ยนคำสั่ง sql ซะ เท่านี้ข้อมูลก็เรียงกันใหม่แล้วแต่... ผมรู้สึกว่ามันไม่โปรเท่าไหร่ แถมมีการ refresh เกิดขึ้นด้วย นั่นมันไม่ใช้ concept ของ web2.0 นี่นา แล้วเราจะเขียนมันได้ยังไงล่ะ?
Javascript คือคำตอบ แต่มันยากนะ เขียนก็ยาก แถม debug ยังยากกว่าอีก Javascript Framework คือคำตอบ ในปัจจุบันมีหลายเจ้าเลยแถมแข่งกันอย่างสนุกสนานเสียด้วย ประสิทธิภาพก็ไม่แพ้กัน ที่นิยมบ้านเราก็มีหลายตัว แต่ที่น่าจะเยอะหน่อยก็คือ jQuery รองมาก็น่าจะเป็น Prototype (เขียนคู่กับ Ruby เป็นกิ่งทองใบหยกเลยแหละ) เมื่อก่อนผมก็เขียน Prototype แต่มีช่วงหนึ่งที่มันเริ่มไม่พอ แถมตัวยังใหญ่และเข้าถึง element class ไม่ได้ด้วย เลยต้องเปลี่ยนมาเป็น jQuery แทนใช้เวลาปรับตัวไม่นานก็ได้แหละครับ

แนวคิดเป็นยังไง?
ไม่ยากเลย ถ้าใช้ table ใน html มันก็เหมือน excel คือมี แถว (row) และคอลั่ม (col) ลองดูรูปประกอบละกันครับ

จากรูปในแต่ละคอลั่มเราจะทำการแยกส่วนที่เป็นข้อมูล (TD) และส่วนของหัวข้อ (TH) ออกจากกันโดยใช้ ขั้นตอนแรกให้เราสร้างตารางตามโค๊ดนี้เลยครับ

  1. <table width='50%' cellspacing='0' cellpadding='0' border='1'>
  2.         <thead>
  3.                 <tr>
  4.                         <th>ลำดับที่</th>
  5.                         <th>ภาษา</th>
  6.                         <th>เงินเดือน</th>
  7.                 </tr>
  8.         </thead>
  9.         <tbody>
  10.                 <tr>
  11.                         <td>1</td>
  12.                         <td>PHP</td>
  13.                         <td>25000</td>
  14.                 </tr>
  15.                 <tr>
  16.                         <td>2</td>
  17.                         <td>JAVA</td>
  18.                         <td>35000</td>
  19.                 </tr>
  20.                 <tr>
  21.                         <td>3</td>
  22.                         <td>Python</td>
  23.                         <td>30000</td>
  24.                 </tr>
  25.                 <tr>
  26.                         <td>4</td>
  27.                         <td>dot Net</td>
  28.                         <td>22000</td>
  29.                 </tr>
  30.                 <tr>
  31.                         <td>5</td>
  32.                         <td>Objective C</td>
  33.                         <td>50000</td>
  34.                 </tr>
  35.         </tbody>
  36. </table>

แนวคิดง่ายๆ เลยครับ พอกดที่ TH ก็ให้ทำการอ่าน TD ที่อยู่ในแนวเดียวกันทั้งหมด (Column) คิดอาจจะง่ายแต่ลองเขียนแล้วยากเหมือนกัน (เหอะๆ) เขียนไปเขียนมาก็ได้โค๊ด jQuery แบบนี้ (อ่านจาก comment ล่ะกันครับ)
การเรียง ผมจะแยกการเรียงเป็นสองแบบคือข้อมูลที่เป็นตัวอักษร กับ ข้อมูลที่เป็นตัวเลข เพราะถ้าเรียงตัวเลขโดยใช้การเรียงแบบเดียวกับตัวอักษร มันจะเรียงได้ไม่ถูก

  1.         $(document).ready(function(){
  2.                 $('table.sort-table').each(function(){
  3.                         var table = $(this); // เก็บตารางไว้ในตัวแปร table จะได้อ้างถึงได้ง่ายๆ
  4.                         $('th', table).each(function(column) { // เลือกหัว (th) ของแต่ละแถว
  5.                                 var header = $(this); // เก็บ th ไว้ในตัวแปรจะได้อ้างง่ายๆ
  6.                                 var sortKey = false; // ตัวแปรบอกว่า แถวนี้เรียงได้หรือไม่
  7.                                 if(header.is('.sort-text')) { // เรียงคอลั่มแบบตัวอักษร
  8.                                         sortKey = function(cell) {
  9.                                                 return cell.find('.sort-text').text().toUpperCase() + ' ' + cell.text().toUpperCase();
  10.                                                 // ทำการส่งข้อมูลในแต่ละช่องไปในตัวแปร sortKey
  11.                                         };
  12.                                 }
  13.                                 else if(header.is('.sort-number')) { // เรียงคอลั่มแบบตัวเลข
  14.                                         sortKey = function(cell) {
  15.                                                 var temp = cell.text();
  16.                                                 temp = parseFloat(temp);
  17.                                                 return isNaN(temp)? 0 : temp;
  18.                                                 // ทำการเลือกแต่ละช่องโดยตรวจสอบก่อนว่าเป็นตัวเลขหรือไม่ ถ้าไม่เป็นให้เปลี่ยนค่าเป็น 0
  19.                                         };
  20.                                 }
  21.                                
  22.                                 if(sortKey) { // ถ้าตัวแปร sortKey มีค่าใส่เข้าไป
  23.                                         header.click(function(){ // เมื่อคลิกที่ th ของแต่ละช่อง
  24.                                                 var sortDirection = 1; // 1 = น้อยไปมาก -1 = มากไปน้อย
  25.                                                 if(header.is('.sorted-asc')) { // class .sorted-asc เป็นตัวบอกว่าเรียงจากน้อยไปมากอยู่
  26.                                                         sortDirection = -1;
  27.                                                 }
  28.                                                 var rows = table.find('tbody > tr').get(); // เอาค่าทุกแถวที่อยู่ใน tbody ออกมา
  29.                                                 $.each(rows, function(index, row){ // ทำการเรียง
  30.                                                         var cell = $(row).children('td').eq(column);
  31.                                                         row.sortKey = sortKey(cell);
  32.                                                 });
  33.                                                 rows.sort(function(a, b) { // บอกทิศทางการเรียง
  34.                                                         if(a.sortKey < b.sortKey) return -sortDirection;
  35.                                                         if(a.sortKey > b.sortKey) return sortDirection;
  36.                                                 });
  37.                                                 $.each(rows, function(index, row){ // สลับแถวในตาราง
  38.                                                         table.children('tbody').append(row);
  39.                                                         row.sortKey = null;
  40.                                                 });
  41.                                                 //  ด้านล่างแค่บอกว่าเรียงไปทางไหนแล้วเฉยๆ
  42.                                                 table.find('th').removeClass('sorted-asc').removeClass('sort-desc');
  43.                                                 if(sortDirection == 1) {
  44.                                                         header.addClass('sorted-asc');
  45.                                                 }
  46.                                                 else {
  47.                                                         header.addClass('sorted-desc');
  48.                                                 }
  49.                                                 table.find('th').removeClass('sorted').filter(':nth-child(' + (column+1) +')').addClass('sorted');
  50.                                         });
  51.                                 }
  52.                         });
  53.                 });
  54.         });

เขียนไป comment ไป หลังๆ เริ่มขี้เกียจเลยออกมาได้ครึ่งๆ กลางๆ แบบนี้นะก็ลองดูแลลัพธ์กันก่อนได้จากตรงนี้เลย (คลิกที่ช่องแรกของแต่ละแถวเพื่อเรียงข้อมูลนะครับ)

เห็นไหมครับ ไม่ยากเลยใช่ไหม ก่อนเอาไปใช้งานก็อย่าลืมใส่ class ให้ table ของเราด้วยนะครับ ไม่อย่างนั้นมันไม่รู้จะเรียงตารางไหนแล้วเรียงฟิลด์ไหนด้วย ก็หวังว่าโค๊ดสั่นๆ ง่ายๆ นี้จะมีประโยชน์กับเพื่อนๆ นะครับ

ปล. เขียนอยู่สามวัน อ่านๆ ดูเหมือนมันไม่ค่อยต่อเนื่องเท่าไหร่เนอะ แต่ก็เอาเหอะเผาจนเสร็จแล้วแหละ

Your rating: None Average: 5 (2 votes)
»