Skip to main content

การใช้งาน DataTables Table plug-in for jQuery

DataTables คือ plug-in  Jquery Javascript สำหรับ จัดการข้อมูล Html Table ซึ่ง การใช้งานนั้น ง่าย มาก ๆ เพียงแค่ นำเข้า Script  ก็สามารถใช้งานได้ทันที  โดยจะมีการจัดรูปแบบข้อมูล ใน Table ของเรา ให้สามารถ ค้นหา(Search) , เรียงลำดับ(Sort) ,  แบ่งหน้า (Pagination)  ให้อัตโนมัติ ซึ่งถือได้ว่าสุดยอด มาก ๆ และ ยังสามารถ ปรับแต่ง Options ต่าง ๆ ได้อีกด้วย มาดูตัวอย่างการเลยดีกว่า

Data Table

ดูตัวอย่าง เพิ่มเติม ที่ Web Site ของ ผู้พัฒนา https://datatables.net/examples/basic_init/zero_configuration.html

เริ่มต้นการใช้งาน DataTables ดังนี้

1.นำเข้า Javascript และ CSS  ดังนี้

2.กำหนด id ให้กับ Html Table ที่ต้องการ ตัวอย่าง กำหนดให้  id  คือ example

** หมายเหตุ ใน Html Table อย่าลืม กำหนด แท็ก thead และ tbody ให้กับ  Table ด้วย หากไม่กำหนด ตัว dataTables จะไม่ทำงาน **

3.คำสั่ง Jquery เรียกใช้งาน dataTables ให้ทำงาน กับตางราง ที่มี id เท่ากับ example

4.ตัวอย่าง Code การเรียกใช้งานทั้งหมด

การประยุกต์ใช้งาน กับ PHP และ ฐานข้อมูล MySQL

ตัวอย่าง Source Code ดังนี้     Download

*** หมายเหตุ ในตัวอย่างการใช้งานนั้นจะเป็นการใช้ PHP โหลดข้อมูล จาก Server มาทั้งหมด  แล้ว ตัว DataTable ค่อยมาทำการแบ่ง หน้าทีหลัง เพราะฉะนั้นจึงไม่เหมาะกับข้อมูลที่มีปริมาณมาก ๆ ซึ่งเราจะต้องมีการปรับปรุง การเรียกข้อมูลโดยใช้ Ajax แทน ซึ่งจะแนะนำในบทความต่อไปครับ ***

การปรับแต่ง options ของ dataTables

การ ปิด การทำงาน ของปุ่ม sort

การใช้งาน กำหนด class ชื่อว่า  no-sort  ให้กับ Column ที่ต้องการปิดการ Sort ข้อมูล

การ ปิด ช่อง ค้นหาข้อมูล  Search

การ ปิด การ แสดงตัวเลือก  Show entries

สามารถดูตัวอย่าง การใช้งานเพิ่มเติมได้ที่  https://datatables.net/

 

 

6 thoughts to “การใช้งาน DataTables Table plug-in for jQuery”

  1. จะปรับจำนวนที่ list ที่เลือกให้แสดงกี่เรคคอร์ด ปรับตรงไหนคะ รบกวนด้วยค้า

    1. ลองปรับเพิ่มในส่วนของ lengthMenu ประมาณนี้ครับ

      $(document).ready(function() {
      $(‘#example’).DataTable( {
      “lengthMenu”: [[10, 25, 50, -1], [10, 25, 50, “All”]]
      } );
      } );

  2. ขอบคุณนะคะ ได้แล้วค่พ แต่ข้อมูลในตารางที่ดึงมาจากฐาน ไม่ยอมอ่านภาษาไทย T T

    1. ขอถามอีกอย่างนะคะ ค้นหา ค้นได้แต่ภาษาอังกฤษ หรอคะ ภาษาไทยมันไม่ค้นให้อ่าค่ะ

      1. ค้นหาได้ทั้ง 2 ภาษาครับ
        อาจเป็น เพราะ query แล้วไม่เป็น ภาษาไทย ลอง set chartset ให้เป็น utf8 ครับ
        ในส่วนของ php
        ลองเพิ่ม
        mysqli_set_charset($conn,”utf8″);
        หลังจาก connect ฐานข้อมูลแล้วครับ

Comments are closed.