ใน workshop นี้จะแนะนำ plugin data table ที่จะช่วยให้การแสดงข้อมูลของเราแสดงเป็นระเบียบ  ใน workshop นี้จะพาแสดงข้อมูลจากตารางที่เป็น html ก่อนนะครับ ส่วนการแสดงข้อมูลจาก database ก็นำมาใช้งานได้เช่นเดียวกันครับ ลองดู workshop แสดงข้อมูลจาก database    http://devbanban.com/?p=251   แล้วนำมาลองปรับใช้กับ data table ดูนะครับ  จะทำให้เราประหยัดเวลาไปได้เยอะเลย และมี ลูกเล่นมากมาย เช่น

  • แสดงข้อมูลในตารางอย่างเป็นระเบียบ
  • มีระบบค้นหาข้อมูลแม่นมากๆ
  • มีระบบเรียงลำดับข้อมูล
  • มีการแบ่งหน้าให้อัตโนมัติ และแสดงข้อมูลหน้าถัดไป
  • มีการแสดงผลรวมของข้อมูลอย่างถูกต้อง
  • สามารถแสดงตารางแบบ Responsive ได้
  • และที่สำคัญเอามาใช้ฟรี จ้าาา

มาดูโค๊ดตัวอย่างกันครับ  (เอาไปปรับแต่งได้ตามใจเลยครับ)

คลิกเพื่อแสดงข้อมูล     datatables

ผลการทำงาน

data

 

 

 

ศึกษาลูกเล่นเพิ่มเติมได้ที่เว็บไซต์ :  https://datatables.net/

 

note

การเรียงลำดับ DESC   “aaSorting” :[[0,’desc’]]

การเลือกช่วงแสดงข้อมูล “lengthMenu” : [[20,50,100, -1], [20,50,100,”All’]]

 

 

มีความสนใจเทคโนโลยีที่ใช้พัฒนาเว็บไซต์ และอยากแบ่งปันความรู้ด้านการพัฒนาเว็บไซต์และอื่นๆอีกมากมาย…

(Visited 5,462 times, 28 visits today)