แต่เดิมไม่เคยรู้จักเลยว่า Datatables คืออะไร จนกระทั่งวันนึง ได้เขียน code ที่มันต้องเรียกลำดับตาราง จาก มาก -> น้อย และ น้อย -> มาก {A-Z / Z-A} ทำให้ปวดหัวกับการเขียน SQL query มาก เนื่องจากเราต้องเปลี่ยน parameter เปลี่ยน variable ตามการเรียงแต่ละครั้ง ยกตัวอย่างเช่น
SELECT * FROM Categories| CategoryID | CategoryName | Description |
|---|---|---|
| 1 | Beverages | Soft drinks, coffees, teas, beers, and ales |
| 2 | Condiments | Sweet and savory sauces, relishes, spreads, and seasonings |
| 3 | Confections | Desserts, candies, and sweet breads |
| 4 | Dairy Products | Cheeses |
| 5 | Grains/Cereals | Breads, crackers, pasta, and cereal |
| 6 | Meat/Poultry | Prepared meats |
| 7 | Produce | Dried fruit and bean curd |
| 8 | Seafood | Seaweed and fish |
เรียงตาม CategoryID จาก มาก-น้อย หรือ Z-A หรือ 9-0
SELECT * FROM Categories ORDER BY CategoryID DESC;| CategoryID | CategoryName | Description |
|---|---|---|
| 8 | Seafood | Seaweed and fish |
| 7 | Produce | Dried fruit and bean curd |
| 6 | Meat/Poultry | Prepared meats |
| 5 | Grains/Cereals | Breads, crackers, pasta, and cereal |
| 4 | Dairy Products | Cheeses |
| 3 | Confections | Desserts, candies, and sweet breads |
| 2 | Condiments | Sweet and savory sauces, relishes, spreads, and seasonings |
| 1 | Beverages | Soft drinks, coffees, teas, beers, and ales |
ถ้าเรียงตาม field อื่นก็ต้องเปลี่ยนค่า เขียนคำสั่งทั้ง POST ทั้ง GET เอามาสร้าง SQL query ใหม่ เพื่อให้ได้ผลลัพท์มันออกมาตามที่ต้องการ ต้องสร้าง Link ที่หัวตารางเพื่อกดให้มันเรียงสลับกันไปมา ทำไปเรื่อยๆ ก็เริ่มเหนื่อยแฮะ หาอย่างอื่นที่มันง่ายกว่านี้ดีกว่า จนกระทั้งมาเจอ DataTables ที่เป็น jQuery Plugin นี่แหละ ตอบโจทย์ชีวิตได้!!
DataTables ทำอะไรได้บ้าง?
- เรียงลำดับข้อมูลได้
- ค้นหาข้อมูลในตารางได้
- มีแบ่งหน้าในตาราง
- ตั้งค่าการแสดงผลได้
- แสดงจำนวนแถวทั้งหมดในตาราง
- มีรูปแบบ theme ให้ใช้
- มันง่ายยยยยย มากๆ
ไม่เชื่อดู Zero Configuration สั่งให้มันทำงาน โดยไม่ต้องตั้งค่าใด ๆ
https://datatables.net/examples/basic_init/zero_configuration.html
ข้อดีระดับ Advanced
- ตั้งค่าได้เยอะ! เปิด/ปิดตัวเลือก, ตั้งค่าการเรียงลำดับ, ภาษา, การแสดงผล
- ใช้ข้อมูลจากแหล่งอื่นได้ ใช้ AJAX ดึง JSON มาเพื่อแสดงเป็นตาราง หรือสร้างจาก Array JavaScript ก็ได้
- การใช้ DOM ได้คุ้มค่า
- Base Style ที่มีให้เลือกเยอะแยะมากมาย แล้ว support Framework ต่างๆ อีกด้วย
- มี API
- มี Plugins เสริมทัพ
เมื่อไปใช้แล้วจะติดใจ จนงานไหนที่ต้องมีการแสดงข้อมูลแบบตาราง และต้องการความรวดเร็ว ต้องหยิบ DT มาใช้งานเสมอ
มาเข้าเรื่องการเรียงวันที่ภาษาไทย
ในกรณีตัวอย่างนี้จะยกมาเฉพาะที่เรียกข้อมูลจาก JSON มาแสดง โดย ชุดข้อมูลจะหน้าตาประมาณนี้
[data] => Array
(
[0] => Array
(
[DT_RowId] => row129
[date] => Array
(
[display] => 03 พ.ค. 2559
[datetime] => 2016-05-03
)
[time] => 13:00PM - 16:30PM
[subject] => ประชุมวัคซีนป้องกันมะเร็งปากมดลูก
[name] => เทศชูกลิ่น
[person] => HRD
[status] => อนุมัติ
)
[1] => Array
(
[DT_RowId] => row94
[date] => Array
(
[display] => 29 มี.ค. 2559
[datetime] => 2016-03-29
)
[time] => 08:30AM - 16:30PM
[subject] => ประชุมโครงการดูแลทารกแรกเกิด
[name] => เทศชูกลิ่น
[person] => ไอ.ซี.ยู กุมารเวชกรรม
[status] => อนุมัติ
)มาดูในส่วนของ property columns ของ DataTable บ้าง
Description
This property can be used to read and write data to and from any data source property, including deeply nested objects / properties. data can be given in a number of different ways which effect its behaviour as documented below.The data that is resolved to for a data point (between this option and columns.render) to will be used by DataTables for the requested data, with three special cases:
columns: [
{ data:
{
_: "date.display",
sort: "date.datetime"
}
},
{ data: "time" },
{ data: "subject" },
{ data: "name" },
{ data: "person" },
{ data: "status" }
],อธิบายในส่วนของ colomn.data ที่เราสร้างเป็น object ภายในมี property ที่จำเป็นต้องระบุก็คือ _ : “string” ให้ระบุค่า default value ที่ใช้ในการแสดงผล ในที่นี้ตั้งไว้ว่า date.display ในส่วนต่อมา property sort จะใช้สำหรับการจัดเรียงลำดับ ซึ่งตรงนี้แหละ ที่ทำให้เราสามารถเรียกวันที่ ด้วยรูปแบบ YYYY-MM-DD ได้ แต่การแสดงผลให้เห็นยังคงเป็นภาษาไทยอยู่นั่นเอง
ซึ่งทั้งนี้เรายังสามารถใช้ในการเรียก จำนวน หรือ อายุ ที่แสดงผลเป็นข้อความยากต่อการจัดเรียง ตัวอย่างเช่น การตั้งอายุว่า 1 ปี 1 เดือน , 12 ปี 6 เดือน , 8 เดือน ระบบจะเรียกค่าตาม ตัวอักษรไม่ได้ ดังนั่นเราต้องสร้าง object column แบบที่ว่านี้ขึ้นมา เพื่อให้การเรียงถูกต้อง
สรุป
วิธีการใช้ชุดข้อมูลแบบนี้ สะดวกกว่าการสร้าง table ผ่าน DOM แล้ว เอา function มาครับเพื่อให้มัน sort ตามรูปแบบที่ต้องการ เคยนั่งทำอยู่ครั้งตอนที่ค่าตัวเลขหลักพันผสมอยู่ ต้องมาแปลง numberFormat x,xxx ให้เป็น xxxx ก่อนถึงจะเรียงได้ มันยุ่งยากและเสียเวลา อีกทั้งยังไม่ยืดหยุ่น เนื่องจากหากเปลี่ยน column เราก็ต้องมาปรับ property ใหม่ ตามโครงสร้างตารางที่เปลี่ยนไป เพราะมันจะมีผลต่อข้อมูลที่แสดงออกมา
