เสริมพลังให้กับตารางข้อมูลด้วยปลั๊กอิน 30 อย่างของ jQuery
เขียนโดย Administrator วันพฤหัสบดีที่ 01 กรกฏาคม 2010 เวลา 17:08 น.
วิธีการแสดงผลแบบง่ายๆเลยแต่เดิมก็คือใช้ HTML สร้างตาราง แต่การสร้างตารางที่แสนจะจืดชืดนั้นช่างขัดกับ Web 2.0 ซะเหลือ มันต้องมีลูกเล่นอะไรใหม่ๆมาเพิ่มให้มันน่าสนใจมั่งสิ
การแสดงตารางแบบปกติคือ static page และไม่สามารถกรองหรือปรับแต่งสิ่งต้องการได้ ดังนั้นจึงอยากจะขอแนะนำปลั๊กอิน jQuery 30 อย่างที่ช่วยให้คุณแสดงข้อมูลเป็น dynamic และปรับแต่งได้อย่างต้องการ มาดูกันเลยดีกว่า
1. DataTables
DataTables เป็นปลั๊กอินของ jQuery ที่มีความยืดหยุ่นสูง ที่จะช่วยให้เราควบคุม Table ที่สร้างจาก HTML ได้ดียิ่งขึ้น โดยความสามารถที่เด่นๆของมันคือ
- ป้อนค่าจำนวนหน้าเพื่อปรับการแสดงผลของ แผงควบคุมหน้า (pagination) ได้
- กรองข้อมูลได้
- เรียงลำดับข้อมูลได้พร้อมกับหลายคอลัมภ์ พร้อมตรวจประเภทข้อมูลได้ (ตัวเลข,ตัวหนังสือ,เงิน)
- ขยายความกว้างของคอลัมภ์เอง
- แสดงข้อมูลได้จากแห่งข้อมูลได้หลายๆอย่าง
- สนับสนุนหลายหลายภาษา
- ปรับแต่งความสวยงามได้ด้วย jQuery UI ThemeRoller
- อึด! แสดงผลข้อมูลมากกว่าพันรายการได้สบายๆ
- รองรับปลั๊กอิน
- ที่สำคัญ ฟรี!
2. jqGrid
สุดยอดปลั๊กอินที่ผมใช้บ่อยๆ ปลั๊กอินตัวนี้มีรุ่นฟรีสำหรับ PHP และสำหรับ ASP.NET โดยเฉพาะ(ไม่ฟรี) ความสามารถก็ล้นเหลือ สามารถปรับแต่งได้แทบจะทุกๆอย่าง เช่นปรับแต่งการกรองคำ,การเรียงลำดับข้อมูล,การค้นหาข้อมูลในตาราง,แยกประเภทของข้อมูลได้ (ตัวเลข,ตัวหนังสือ,เงิน,วันที่,), รองรับหลายภาษา,กำหนดให้ auto refresh, รองรับ Theme หลากหลาย,กำหนดสีในแต่ละแถวได้, แสดงผลได้ดีในทุกๆ browser, สามารถใส่ sub grid เข้าไปได้, ที่สำคัญรองรับการ drag&drop ด้วย!! เมพขิง! (เขียนอวยไปไหมเนี่ย -..-) ว่าแล้วไปลองเล่นดูกันเอาเองนะ
3. Table Pagination
ปลั๊กอินตัวนี้ถูกออกแบบมาให้แสดงผลง่าๆย เราสามารถปรับแต่ง แผงควบคุมหน้า (pagination) ได้ด้วย element
4. PicNet Table Filter
ปลั๊กอินตัวนี้จะมีจุดเด่นตามชื่อของมันเลย คือสามารถกรองข้อมูลได้ในแต่ละคอลัมภ์
5. uiTableFilter
ปลั๊กกอินอีกตัวที่รองรับการกรองข้อมูลแบบค้นหา จุดเด่นๆคือไม่ต้องเรียกหน้าเว็บใหม่นั่นเอง
ดาวน์โหลด | ดูตัวอย่าง 1 | ดูตัวอย่าง 2
6. TableFilter
7. LiveFilter
ปลั๊กอินตัวนี้สามารถกรองผลเรียงลำดับได้ แต่จุดเด่นจริงคือมันค่อนข้างเบาแรง และมีเอกสารประกอบที่ดีทำให้เข้าใจได้รวดเร็ว
8. TableSort
เป็นปลั๊กที่ไม่เด่นไม่แย่อะไร สามารถจัดเรียงหน้าได้ง่ายๆ
9. Tablesorter
ชื่อคล้ายๆกับตัวข้างบนใช่ม่ะ แต่ความสามารถไม่เหมือนกัน โดยเจ้าตัวนี้จะทำงานแทนที่ HTML TAG เช่นพวก THEAD และ TBODY ความสามารถที่เด่นๆเลยก็มี
- รองรับการเรียงข้อมูลหลายคอลัมภ์
- รองรับข้อมูลได้หลายแบบเด่นๆเลยก็มี ข้อความ, เลข, เงิน, URIs ต่างๆ และ IP Address
- รองรับคำสั่ง ROWSPAN and COLSPAN บนตาราง
- สามารถซ่อนข้อมูลได้
- มี widget เสริม
- รองรับทุกเบราเซอร์ (IE6 ก็ได้นะ!)
- ใช้โค้ดนิดเดียว
10. jQuery.TinySort 1.0.3
ปลั๊กอินอันนี้ก็เป็นปลั๊กอินเบาๆสำหรับคนที่ต้องการแค่จัดเรียงข้อมูลได้
11. Table Drag and Drop JQuery plugin
ปลั๊กอินตัวนี้ชื่อบ่งบอกมาแต่ไกลเลยว่าสามารถจัดเรียงแถวได้ด้วยการคลิกลากและวาง(Drag&Drop)
12. HeatColor
เป็นปลั๊กอินที่สามารถปรับแต่สีในแต่ละแถวได้ผ่าน element ที่กำหนดในตัวปลั๊กอิน
13. Fixed Header Tables
ปลั๊กอินที่ธรรมดาๆตัวนึง
14. Graph Data from an HTML table using jQuery and flot
สามารถสร้างรูปภาพกราฟได้จากข้อมูลที่มีอยู่ในตาราง โดยที่ต้องมี flot ติดตั้งอยู่ด้วย
15. Visualize: Accessible Charts with HTML5 from Designing with Progressive Enhancement
หนึ่งในเทคโนโลยีที่กำลังมา HTML5 โดย Visualize plugin ไม่ต้องมีอะไรมากมายเพียงแค่เพิ่ม ARIA ในหน้าที่ผู้ใช้อ่านอยู่และปรับแต่งด้วย CSS ผลก็ออกมาสวยงาม
16. jqTreeTable
ถ้าคุณใช้ JQTreeTable คุณไม่ต้องเพิ่มอะไร เพียงแค่สร้าง HTML เปล่าๆตัวปลํ๊กอินจะจัดการแปลข้อมูลให้เป็น ตารางที่หน้าสนใจขึ้นมาทันที แถมยังสามารถกำหนดมุมมองแบบ Treeview ได้อีกด้วย
17. jQueryTreeTable
ก็คล้ายๆกับตัวด้านบน (มุกเริ่มตัน -.,-)
18. Ingrid
เป็นตารางแบบกริดง่ายๆเหมาะสำหรับผู้ที่จะเริ่มต้น โดยมีความสามารถข้องตารางกริดครบถ้วนเช่น ย่อ, ขยาย, จัดหน้า, เรียงข้อมูล เป็นตอ
19. ColumnManager
เป็นปลั๊กอินสำหรับการแสดงหรือซ่อนคอลัมภ์ที่ไม่ต้องการได้
20. ColumnHover
จุดเด่นของปลั๊กอินตัวนี้คือเมื่อเรานำเม้าส์ไปวางเหนือตาราง จะมีการทำแถบสี(Highlights) ที่ตารางโดยรองรับ ตารางที่มีคำสั่ง colspans และ rowspans ด้วย
21. Colorize
เป็นอินที่มีลูกเล่นเรื่องการทำแถบสี (Highlights) โดยจุดเด่นก็คือสามารถกำหนดสีและคลิกที่ตารางเพื่อให้แถบสีนั้นอยู่และคลิกอีกทีเพื่อทำให้แถบสีนั้นหายไป เขียนมาเยอะชักงงๆเอาเป็นว่าไปดูตามตัวอย่าเล้ยยย
22. KeyTable
ปลั๊กอินตัวนี้ทำให้เราสามารถใช้ปุ่มลูกศรเลื่อนแถบข้อมูลในตารางได้เหมือนกับที่เราใช้ลูกศรเลือนตารางในโปรแกรม Excel
23. Grider
ปลั๊กอิน Grider จะทำให้ชีวิตคุณง่ายดายยิ่งขึ้น ถ้าเราต้องการใช้งานตารางในการแก้ไขข้อมูลในตาราง ความสามารถที่เด่นๆของมันคือ
- สามารถตรวจสอบได้ว่าอันไหนคือหัวตาราง
- สามารถเพิ่มผลรวมของแต่ละแถวได้
- เพิ่มแถวใหม่หรือลบแถวที่ไม่ต้องการได้
- สามารถใช้คำสั่ง เฉลี่ย(avg), ผลรวม(sum), มากสุด(max), น้อยสุด(min) ได้
- ทำงานร่วมกับ Ruby on Rails ได้ง่ายๆ
24. jQueryTableRowCheckboxToggle
- คลิกในแถวจะเป็นเลือกข้อมูลใส่ checkbox เอาไว้
- ดูสรุปว่าเราเลือกอะไรไปแล้วบ้าง
- สามารถปรับการตั้งค่าเริ่มต้นได้เองที่ไฟล์ tableRowCheckboxToggle.js
25. jExpand
ปลั๊กอิน jExpand เป็นปลั๊กอินทีมีจุดเด่นเรื่องเบาและใช้ย่อขยายตารางได้ง่ายๆ คุณสมบัตินี้จะช่วยให้ซ่อน/ขยาย ข้อมูลในตารางเช่นพวก รูปภาพ ไดอะแกรม หรืออื่นๆ เพื่อความสวยงามในการดูตารางข้อมูล
26. TableEditor
เป็นปลั๊กอินที่มีความยืดหยุ่นสูง โดยการทำงานจะเข้าไปแทนที่ตารางที่เป็น HTML. เราสามารถแก้ไขข้อมูลในตารางได้ผ่านทาง AJAX Request
27. jGridEditor
เป็นปลั๊กอินที่สามารถคลิกบนตารางแล้วเลือกแก้ไขบนตารางได้เลย เราสามารถกำหนดค่า AJAX queries และค่าที่ตอบกลับมาด้วยข้อความของเราเองได้, ปลั๊กอินตัวนี้ถูกออกแบบมาให้เข้ากับ Google App Engine อีกด้วย ถ้าคุณพัฒนางานอยู่บน Google App Engine ขอแนะนำให้ใช้ตัวนี้เล้ยยย
28. Zentable
เป็นปลั๊กอินที่น่าใช้อีกตัว คุณสมบัติเด่นๆของปลั๊กอินตัวนี้คือ สามารถอนุญาตให้เราจัดจัดการและเรียงข้อมูลได้มากมายบนหน้าเว็บนั้นได้เลย ปลั๊กอินตัวนี้รองรับการ ย่อ, ขยาย, รวมถึงใช้การเลื่อขึ้นลงโดยใช้ปุ่มกลางของเม้าส์ได้ และยังมีจุดเด่นอื่นๆอีกดังนี้
- โหลดข้อมูลตามจริงโดยใช้ AJAX หรือฝังข้อมูล(Embedded) ไว้บนหน้าเว็บนั้นเลย
- ใช้ปุ่มหมุนของเม้าส์เพื่อเลื่อนข้อมูล ขึ้น-ลง ได้
- ย่อขยายความกว้างของคอลัมภ์ได้
- จัดการเรียงข้อมูลและกรองข้อมูลได้
- รองรับ Tooltip
- รองรับการแก้ไบนเว็บเดี๋ยวนั้นเลย
- รองรับการแปลงข้อมูลจาก HTML เป็นตารางเลย
- ปรับแต่งความสวยงามได้โดย CSS สามารถกำหนดให้แถวและคอลัมภ์มีรูปแบบที่ต่างกันได้
29. Flexigrid
ปลั๊กอินตัวนี้เป็นปลั๊กอินที่ผมชอบรองลงมาจาก jqGrid เป็นปลั๊กอินขนาดเล็กแต่ความสามารถไม่เล็กตาม มีความสามารถพื้นฐานอย่างที่ตารางกริดควรจะมีครบถ้วน การใส่ข้อมูลให้ตัวนี้ใช้รูปแบบ XML และใช้ AJAX โหลดข้อมูลมาใส่ตาราง. ส่วนความสามารถอื่นๆก็มี
- ย่อขยายคอลัมภ์
- ปรับแต่งความกว้างความสูงขอตารางได้
- จัดเรียงข้อมูล
- ธีมแหล่ม
- แปลงเป็นตารางข้อมูลธรรมดาได้
- เชื่อมต่อกับข้อมูลที่เป็น XML หรือ JSON ได้
- มีแผงควบคุมหน้า
- ซ่อน/แสดง คอลัมภ์
- มีแถบเครื่องมือที่ปรับแต่งได้เอง
- มีเครื่องมือค้นหา
- มี API ให้เรียกจากข้างนอกได้
- อื่นๆอีกมากมาย
30. jQuery Week Calendar
ปลั๊กอินตัวนี้ชื่อก็บอกอยู่แล้วว่าเหมาะสำหรับงานด้านปฎิทิน เป็นปลั๊กอินที่มีความยืดหยุ่นสูงสามารถปรับแต่งความสวยงามได้ด้วย jQuery UI มีความสวยงามงามน่าใช้เหมือนกับ Google Calendar
ขอขอบคุณ 1stwebdesigner
Subscribe to this comment's feed
