DataTables รูปแบบการเขียนโค้ด Server-side

การทำในส่วนโค้ดของ Server-side ของ DataTables นั้นจะใช้ภาษาอะไรก็ได้ แต่ในตัวอย่างในโค้ดของเคนจะเป็นภาษา PHP และใช้อยู่ใน Codeigniter 3 นะ เพราะเคนใช้อันนี้เป็น Framework หลัก

HTML

ในส่วนนี้จะไม่ต้องทำอะไรมาก แค่สร้าง Table ใส่ Class ใส่ Id และกำหนดแค่ส่วน thead แค่นี้ก็โอเคแล้ว

<table class="table table-bordered table-hover" id="js_datatable">
  <thead>
    <tr>
      <th style="width: 40px;" class="text-center">ไอดี</th>
      <th>ชื่อ</th>
      <th style="width: 150px;" class="text-center">วันที่</th>
      <th style="width: 100px;" class="text-center">สถานะ</th>
    </tr>
  </thead>
</table>

Javascript

ส่วนนี้เคนใช้ร่วมกับ jQuery นะ ถ้าใครใช้ Javascript เพียวๆ ก็เอาไปแปลงเอานะ แล้วก็ทำการ import datatables.js , datatables.css ให้เรียบร้อยก่อนนะ

$(document).ready(function() {
  $('#js_datatable').DataTable({
    responsive: true,
    processing: true,
    serverSide: true,
    pageLength: 10, // ต้องการหน้าละกี่รายการ กำหนดเอาเลย
    ajax: {
      url: "/home/get_datatables_data", // กำหนด URL ที่ต้องการยิง Ajax ไปทำการเรียกข้อมูล
      type: 'POST',
      // ข้อมูลที่ส่งกลับมาจะมีชื่อในอาเรย์ตามนี้ dataid, name, date, status
    },
    columns: [ // กำหนดข้อมูลที่ส่งกลับมาว่าจะไปลงที่ td column ไหน โดยจะเรียงจากอันแรกไปจนถึงอันท้ายเหมือนตอนเราสร้าง Table tr td ลงข้อมูลปกติ
      { data: 'dataid' },
      { data: 'name' },
      { data: 'date' },
      { data: 'status' },
    ],
  });
})

PHP – Codeigniter 3

อันนี้จะเป็นฟังก์ชั่นไว้ทดสอบเท่านั้น โดยการรับค่าพื้นฐานที่ DataTables ส่งมา เช่น start, length, search และทำการสร้างอาเรย์ข้อมูลแล้วส่งกลับเป็น JSON โดยส่วนที่ต้องส่งกลับจริงๆ มี 3 ตัวคือ iTotalDisplayRecords, iTotalRecords, data

โดยตัว data จะทำการส่งกลับเป็นข้อมูลตามจำนวนเรคคอร์ดต่อหน้านะ เช่น เรามีข้อมูล 500 รายการ ถ้าเราแสดงแต่ละหน้า หน้าละ 50 รายการ ข้อมูลใน data ต้องทำการส่งกลับแค่เพียง 50 รายการ ใส่ในอาเรย์เริ่มตั้งแต่ตัวที่ 0 – 49 โดยที่ถ้าเราส่งกลับหมดเลยทั้ง 500 รายการมันจะเอาไปโปะหน้าเดียว 500 รายการเลย

หากต้องการส่งกลับทีเดียว 500 รายการ แล้วต้องการให้ DataTables ไปจัดการเอาเองให้ไปดูเพิ่มเติมที่ส่วนของ Client-side แทน มันทำได้เช่นกันเพราะลองแล้ว แต่พอข้อมูลเยอะมากๆๆๆๆ การทำ Server-side ตัดส่งไปทีละนิด จะดีกว่า

class Home extends CI_Controller
{
  public function get_datatables_data()
  {
    $post = $this->input->post();

    $start_record = $post['start'];
    $per_page = $post['length'];
    $search = $post['search'];

    $items = [];
    for ($i = 0; $i < $per_page; $i++) {
      $items[$i]['dataid'] = ($i + $start_record + 1);
      $items[$i]['name'] = 'item :' . ($i + $start_record + 1);
      $items[$i]['date'] = '2020-06-17 08:05:00';
      $items[$i]['status'] = 'Normal';
    }

    $count_all_items = 1000; // จำนวนข้อมูลสูงสุดที่เรามี ในส่วนนี้ปกติก็ num_rows() เอาจากฐานข้อมูลนะ แต่อันนี้กำหนดเอาดื้อๆ เลยว่ามี 1000 มันจะเอาจำนวนนี้ไปคำนวณว่าจะมีกี่หน้า

    $response = array(
      "iTotalDisplayRecords" => $count_all_items,
      "iTotalRecords" => $count_all_items,
      "data" => $items,
    );
    
    echo json_encode($response);
  }
}