ใน 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 4,081 times, 49 visits today)

Related posts:

Bootstrap.3 : ทำลิงค์ธรรมดาให้สวยงาม, ทำลิงค์ให้เป็นปุ่ม, Link button
Ajax Change dropdown list ร่วมกับ PHP + Mysqli [เลือกภาคและแสดงจังหวัด]
WE.12 การใช้งาน data table ร่วมกับ Dreamweaver + php + database
ระบบฐานข้อมูลวิสาหกิจชุมชนในเขตฝั่งธนบุรี
Free Template 06 Form ยืนยันการสั่งซื้อสินค้า + code ตัวอย่าง
Bootstrap.15 การใช้ Class Thumbnails Bootstrap ทำแคตตาล็อคสินค้า
Bootstrap.16 Navbar menu automatically drop down on hover over
WEB.25 ตะกร้าสินค้า php, Dreamweaver, Bootstrap ตอนที่ 3 Confirm Cart
Bootstrap.18 - 19 : Bootstrap สอนติดตั้งและใช้งาน Typography
Data Tables Server-side processing Example [php]