🔥 อยากสร้าง Data Table เพื่อรองรับข้อมูลอันมหาศาลลล ทำยังไงดี ??
ต้องนี่ !! Library เจ๋ง ๆ จาก JavaScript ที่จะช่วยให้เพื่อน ๆ สร้าง Data Table ได้อย่างง่ายดาย แถมยังมีรูปแบบ Table ให้เลือกตามใจชอบเลยจ้าาา มีอะไรบ้างนั้น ไปดูกันเลย
.
🔴 1) DataTables
เป็น Libs จาก JavaScript ใช้งานง่าย และฟรี มีฟีเจอร์เยอะไม่ว่าจะเป็นการแบ่งหน้า, ช่อง Search, เลือกจำนวน Entries แถมรองรับการแสดงผลบนมือถืออีกด้วย
.
👉 โหลดใช้งานได้ที่นี่จ้า >> https://www.datatables.net/
.
🟠 2) Webix DataTable
เป็น Libs ที่จะช่วยให้เพื่อน ๆ สามารถจัดการกับข้อมูลในตารางอย่างง่ายดาย สามารถรองรับข้อมูลขนาดใหญ่ได้ด้วย แสดงผลได้รวดเร็ว มีฟีเจอร์เจ๋ง ๆ เช่น รูปแบบตารางหลากหลาย, ลากวางวิดเจ็ตได้อย่างอิสระ
.
👉 โหลดใช้งานได้ที่นี่ >> https://webix.com/widget/datatable/
🟡 3) PrimeNG Table
เป็น Component UI สำหรับ Angular รองรับการทำ Dynamic column เป็น Open-Source ใช้งานได้ฟรี ๆ จัดเรียง Column ใหม่ได้ง่าย ๆ และสามารถ Export ข้อมูลในตารางได้อีกด้วย
.
👉 โหลดใช้งานได้ที่นี่ >> https://www.primefaces.org/primeng/showcase/#/table
🟢 4) Vuetable
Libs JavaScript สุดเจ๋ง ใช้งานร่วมกับ Vue.js และ Axios ได้ มีฟีเจอร์หลากหลาย เช่น แปลงข้อมูลในตารางเป็น JSON, รองรับ CSS Framework, ปรับแต่ง Field ได้อิสระ, ปรับแต่งการ Sorting ได้ตามต้องการ
.
👉 โหลดใช้งานได้ที่นี่ >> https://www.vuetable.com/
🟣 5) KendoReact
สร้าง Data Table แถมยัง Export ข้อมูลเป็นไฟล์ Excel และ PDF ได้อีกด้วย ทำงานได้รวดเร็ว สามารถปรับแต่งได้เยอะ สามารถแยกบันทึกข้อมูลตาม Record ที่ต้องการได้ และสามารถตรึง Column ที่ต้องการได้ง่าย ๆ
.
👉 โหลดใช้งานได้ที่นี่ >> https://www.telerik.com/kendo-react-ui/components/grid/
.
ครบทั้ง 5 อันแล้ว เป็นยังไงกันบ้าง ลองเอาไปปรับใช้กับโปรเจกต์ของเพื่อน ๆ ดูนะ และหวังว่ามีเป็นประโยชน์กับเพื่อน ๆ น้า 😍
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
同時也有10000部Youtube影片,追蹤數超過2,910的網紅コバにゃんチャンネル,也在其Youtube影片中提到,...
「datatables」的推薦目錄:
- 關於datatables 在 BorntoDev Facebook 的最佳解答
- 關於datatables 在 BorntoDev Facebook 的最佳解答
- 關於datatables 在 BorntoDev Facebook 的最佳貼文
- 關於datatables 在 コバにゃんチャンネル Youtube 的最佳貼文
- 關於datatables 在 大象中醫 Youtube 的精選貼文
- 關於datatables 在 大象中醫 Youtube 的最讚貼文
- 關於datatables 在 jQuery 表格插件DataTables | 前端筆記 的評價
- 關於datatables 在 DataTables plug-in for jQuery - GitHub 的評價
- 關於datatables 在 Jquery Datatables custom column searching - Stack Overflow 的評價
- 關於datatables 在 【JS套件系列-EP5】「DataTable」 3分鐘建立超強表格; 中文化 的評價
datatables 在 BorntoDev Facebook 的最佳解答
🔥 "เบื่อไหมกับ Table หน้าตาแบบเดิม ๆ ที่ใช้ประโยชน์อะไรไม่ได้ !?"
.
วันนี้แอดมาเอาใจสายเว็บด้วยการแนะนำให้รู้จักกับ DataTables เครื่องมือที่ช่วยให้ User ประทับใจทุกครั้งที่ใช้งานเว็บของเราไปพร้อมกัน <3
.
บอกเลยว่าเด็ดมาก เพราะเขามีจัดเรียงข้อมูล รวมถึง ค้นหาข้อมูลให้ด้วยนะ :D
.
#borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
datatables 在 BorntoDev Facebook 的最佳貼文
😱 "ถ้าวันนึงเราต้องแสดงผลข้อมูลเป็นพัน เป็นหมื่น เป็นแสน Record ลง Table จะจัดการกับมันยังไงดีนะ ?"
.
หากคุณใช้เวลาคิดเกิน 10 วินาที ทางเราขอเสนอ DataTables เครื่องมือง่าย ๆ ที่ช่วยให้เราเอาเวลาไปคิดเรื่องอื่นได้อีกเยอะ
.
กับฟังก์ชันเริ่มต้นที่มีให้ไม่ว่าจะเป็นการเลือกได้ว่าจะแสดงกี่แถม เรียงลำดับตามข้อมูลตัวไหน ไปจนถึงการค้นหา และ แบ่งหน้าให้อัตโนมัติเลยนั่นเอง <3
.
✅ หากใครสนใจนำวิธีนี้ไปแก้ มาดูการใช้งาน DataTables EP1 แบบไว ๆ ใน 10 นาทีกันเลย
.
https://www.borntodev.com/2020/06/11/%e0%b8%97%e0%b8%b3-table-%e0%b9%83%e0%b8%ab%e0%b9%89%e0%b8%99%e0%b9%88%e0%b8%b2%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-datatables/
.
🔥 "แต่ถ้าข้อมูลมันเยอะจริง ๆ ถ้าใช้วิธีนี้จะแสดงผลช้าลงหน่อย" ซึ่งทางแก้ทีมแอดได้เสนอไว้เรียบร้อยในบทความ EP2 จ้า
.
https://www.borntodev.com/2020/06/16/%e0%b8%97%e0%b8%b3-datatables-%e0%b9%83%e0%b8%ab%e0%b9%89%e0%b8%99%e0%b9%88%e0%b8%b2%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b8%82%e0%b8%b6%e0%b9%89%e0%b8%99%e0%b9%84%e0%b8%9b%e0%b8%ad%e0%b8%b5%e0%b8%81/
.
#borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
datatables 在 コバにゃんチャンネル Youtube 的最佳貼文
datatables 在 大象中醫 Youtube 的精選貼文
datatables 在 大象中醫 Youtube 的最讚貼文
datatables 在 DataTables plug-in for jQuery - GitHub 的推薦與評價
DataTables is a table enhancing plug-in for the jQuery Javascript library, adding sorting, paging and filtering abilities to plain HTML tables with minimal ... ... <看更多>
datatables 在 jQuery 表格插件DataTables | 前端筆記 的推薦與評價
表格的樣式和功能可以用HTML 的table 標籤和Javascript 做設定. 資料不只可以建立在HTML 也可以用Ajax 取得. 官網:https://datatables.net ... ... <看更多>