การติดตั้งใช้งาน Datatables กับการดึงข้อมูลแบบ AJAX Server-side [PHP+MySQL]

DataTables เป็นส่วนเสริมของ jQuery (Javascript library) ซึ่ง Datatables เป็นเครื่องมือที่มีความหยืดหยุ่นในการใช้งาน ได้หลากหลายรูปแบบ โดย DataTables จะนำข้อมูลออกมาแสดงในรูปแบบของตาราง มีการเรียงลำดับตามคอลัมน์ มีการค้นหา และที่สำคัญสุดมีการจัดการในเรื่องของการแบ่งหน้าของตารางอีกด้วย และดึงข้อมูลแบบ AJAX โดยดึงข้อมูลที่ใช้จริงมาแสดง เช่น ดึงข้อมูลที่หน้า 5 จำนวน 10 แถว เป็นต้น โดยเพียงการเขียนโค๊ดเพียงไม่กี่บรรทัดเท่านั้นเอง

สำหรับ source code DataTables Plugin สามารถดาวน์โหลดได้ฟรี ครับ

ซึ่งเนื้อหาบทความนี้ จะสอนวิธีการติดตั้ง ตั้งแต่เริ่มต้นพร้อมคำอธิบาย รูปภาพประกอบกันไปเลยเพื่อให้ผู้อ่าน ได้มีความเข้าใจได้ง่ายขึ้น

ทดสอบการใช้งาน (DEMO) คลิกที่นี้เพื่อทดสอบ

เรามาเริ่มกันเลยดีกว่า วิธีการติดตั้งขั้นตอนแรกให้เราไปโหลด Sourcecode DataTables จากลิงค์ดาวน์โหลดจากเว็บหลักที่นี้ https://datatables.net/download/packages

 

หลักจากนั้นให้เราแตกไฟล์ Sourcecode ที่ได้โหลดมา แล้ว Copy โฟล์เดอร์ media มาทั้งหมดมาวางไว้ในภายในโปรเจคที่เราจะเรียกใช้งานนะครับ

ต่อจากนั้นโหลดไฟล์ฐานข้อมูลที่ชื่อ datatables.sql เพื่อใช้สำหรับเป็นข้อมูลทดสอบสำหรับบทความนี้นะครับ คลิกเพื่อดาวน์โหลด

ดาวน์โหลดไฟล์ ssp.class.php คลิกเพื่อดาวน์โหลด ไฟล์นี้คือชุดคำสั่งเรียกข้อมูลจาก mysql

ดาวน์โหลดมาแล้วให้ทำการ import ข้อมูลลงสู่ฐานข้อมูล วิธีการคือ
1. สร้างชื่อฐานข้อมูลในตัวอย่างบทความนี้ใช้ชื่อ datatables พอใส่ชื่อเสร็จกดปุ่ม Create ได้เลย

2. คลิกเลือกเมนู import ตรงเมนูบน

3. คลิกเลือกปุ่ม “เลือกไฟล์”แล้วเลือกไฟล์ฐานข้อมูลที่เราดาวน์โหลดมาเมื่อกี้ครับ (datatables.sql)

หลักจากที่เรา import ข้อมูลเสร็จแล้ว ขั้นตอนต่อไปเป็นการเรียกใช้งานนะครับ
การเรียกใช้งานจำเป็นต้องมีไฟล์ jquery นะครับ ถ้าหากไม่มี datatables จะไม่ทำงาน!
1. ให้ include ไฟล์ js — jquery.dataTables.js และไฟล์ css — jquery.dataTables.min.css ไว้บน <header>

<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.min.css">
<script src="media/js/jquery.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.js" type="text/javascript"></script>

2. ในส่วนของเนื้อหาที่จะแสดงตารางข้อมูล ให้นำโค๊ดตัวอย่างด้านล่างนี้ใส่ไปครับ

<table id="example" class="display" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>First name</th>
          <th>Last name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>First name</th>
          <th>Last name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </tfoot>
    </table>

3. เขียนคำสั่ง javascript ให้เรียกใช้งาน

<script type="text/javascript">
  $(document).ready(function() {
    $('#example').DataTable( {
      "processing": true,
      "serverSide": true,
      "ajax": "server_processing.php"
    } );
  } );
  </script>

คำอธิบายของโค๊ดนี้คือ ดึงข้อมูลแบบ server-side โดยให้ไฟล์ server_processing.php ประมวลผลข้อมูลแล้วนำกลับมาใช้ที่หน้าตารางนี้ โดยโค๊ดของไฟล์ server_processing.php จะเรียกข้อมูลมาเฉพาะที่จะแสดงผลเท่านั้น เช่นดึงข้อมูลหน้า 5 และดึงมาเพียง 10 แถวเท่านั้น
ให้เราสร้างไฟล์ server_processing.php และนำโค๊ดด้านล่างนี้วาง แล้วกด Save ครับ

<?php
//ชื่อตาราง
$table = 'datatables_demo';
//ชื่อคีย์หลัก
$primaryKey = 'id';
//ข้อมูลอะเรที่ส่งป datables
$columns = array(
  array( 'db' => 'first_name', 'dt' => 0 ),
  array( 'db' => 'last_name',  'dt' => 1 ),
  array( 'db' => 'position',   'dt' => 2 ),
  array( 'db' => 'office',     'dt' => 3 ),
  array(
    'db' => 'start_date',
    'dt' => 4,
    'formatter' => function( $d, $row ) {
      return date( 'jS M y', strtotime($d));
    }
  ),
  array(
    'db' => 'salary',
    'dt' => 5,
    'formatter' => function( $d, $row ) {
      return '$'.number_format($d);
    }
    )
  );

  //เชื่อต่อฐานข้อมูล
  $sql_details = array(
    'user' => 'root',
    'pass' => '',
    'db'   => 'datatables',
    'host' => 'localhost'
  );
  // เรียกใช้ไฟล์ spp.class.php
  require( 'ssp.class.php' );

//ส่งข้อมูลกลับไปเป็น JSON โดยข้อมูลถูกดึงมาจากการเรียกใช้ class ssp
  echo json_encode(
      SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
  );

คำอธิบาย
เป็นไฟล์ที่ใช้ในการดึงข้อมูลจากฐานข้อมูลมาแล้วมาจัดรูปแบบข้อมูลให้อยู่ในแบบที่ต้องการ โดยจัดเป็นแบบ Array ส่วนไฟล์ที่เรียกใช้ฐานข้อมูลคือไฟล์ ssp.class.php
ในส่วนของรายละเอียดการเชื่อมต่อฐานข้อมูลตรงนี้ เราต้องใส่ให้ถูกต้องกับข้อมูล Server ของเราด้วยครับ

ลองดูผลลัพธ์ด้านล่าง

ต่อ… สำหรับใครต้องการผลรวมแต่ละหน้า สามารถทำได้โดยเขียน script javascript เพิ่มเติมใน

$('#example').DataTable( {

ตามโค๊ดด้านล่างนี้นะครับ

"footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;

            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };

            // Total over all pages
            total = api
                .column( 5 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            // Total over this page
            pageTotal = api
                .column( 5, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            // Update footer
            $( api.column( 5 ).footer() ).html(
                '$'+pageTotal +' total'
            );
        }

 

จบแล้วสำหรับบทความนี้
สำหรับ Source code ตัวอย่าง แบบเต็มสามารถดาวน์โหลดได้ที่ https://github.com/ipball/ex_datatables/archive/master.zip

หรือ Clone Git https://github.com/ipball/ex_datatables

ทางผู้เขียนคงคิดว่าน่าจะมีประโยชน์สำหรับคนที่เข้ามาอ่านไม่มากก็น้อย แต่ก็ดีใจครับ ที่ยังมี ฮ่าๆ หากมีข้อสงสัยตรงไหน คอมเม้นไว้ด้านล่างเลยครับ…ขอบคุณครับ

You May Also Like

About the Author: benext

โปรแกรมเมอร์ ติดต่อ : itoffside@hotmail.com

4 Comments

  1. อยากให้นำออกจากฐานข้อมูลเป็นภาษาไทยได้มัยค่ะ พอดีน้องเอาออกมาเป็นภาาาเอเลียน ต้องทำยังไงค่ะ

    1. ตอนแสดงเป็นภาษาไทย ใช่ไหมครับ ลองดูในส่วนของ encoding html นะครับ

  2. สอบถามครับ datatable นี้สามารถค้นหาชื่อเป็นภาษาไทยได้หรือเปล่า ครับ

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.