Datatables.js ใช้ Ajax โหลดข้อมูลทีละหน้าเกิน 10,000 Row

Datatables.js ใช้ Ajax โหลดข้อมูลทีละหน้าเกิน 10,000 Row

Datatables.js ใช้ Ajax โหลดข้อมูลทีละหน้า

สำหรับการแสดงผลข้อมูลในรูปแบบตารางนั้น อีกหนึ่ง plugin ที่ได้รับความนิยมอย่างมากคือ datatables.js เพราะมีความยืดหยุ่นสูงสามารถปรับรูปแบบตารางได้หลากหลาย รองรับ responsive table ใช้งานง่าย เหมาะสำหรับการใช้แสดงผลข้อมูลรูปแบบตารางและทำรายงาน

สำหรับการแสดงผลข้อมูลที่ถูก query มาจากฐานข้อมูลปริมาณมาก ๆ datatables.js ได้ถูกออกแบบมาให้รองรับเรื่องนี้อยู่แล้วนะครับ เพียงแต่การใช้งานจะต้อง ใช้งานในรูปแบบที่ถูกต้องทั้งส่วนของการ query จัดการ format ข้อมูล จนถึงส่งข้อมูลออกมาแสดงผล

ผลการทดสอบ
จากการทดสอบโดยได้สร้างฐานข้อมูลขนาด 70,000×6 Row Column ความหมายคือ มี field ในเทเบิ้ลทั้งหมด 6 Column และมีการ insert ข้อมูลเข้าไปทั้งหมด 70,000 Row แน่นอนว่าถ้าเราใช้การ query มาแสดงผลใน datatable หลัก 10,000 Row ระบบก็คงทำงานไม่ไหวแล้ว

ตัวอย่าง Datatables.js ใช้ Ajax โหลดข้อมูลทีละหน้าเกิน 10,000 Row

วิธีใช้งาน

• สร้าง html กำหนด ID ให้ table สำหรับใช้กับ datatables plugin

  <table id="authors_table"> <!--กำหนด ID ให้ table สำหรับใช้กับ datatables plugin-->
      <thead>
          <tr>
              <th>ID</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Email</th>
              <th>Birthdate</th>
              <th>Added</th>
          </tr>
      </thead>
      <tbody>
          
          <!--โหลข้อมูล Row x Column เข้ามาแสดงผล-->
          
      </tbody>
  </table>

• เขียน javascript สำหรับโหลดข้อมูล JSON จาก PHP มาแสดงใน Datatables

  var authors_table = $("#authors_table").DataTable({
      "sPaginationType": "full_numbers",
      "pageLength": 25
      "columns": [
              {"width": "10%" },
              {"width": "20%" },
              {"width": "20%" },
              {"width": "10%" },
              {"width": "10%" },
              {"width": "15%" }
       ],
      "processing": true,
      "serverSide": true,
      "ajax": "getAuthors.php"
  });

• ดาวน์โหลด ssp.class.php ซึ่งพัฒนาโดยทีมพัฒนา datatables.js จากนั้นเขียน PHP เพื่อ Query ข้อมูลดังนี้

  require 'ssp.class.php';
  $table = 'authors';
  $primaryKey = 'id';
  $columns = array(
  	array( 'db' => 'id', 'dt' => 0 ),
  	array( 'db' => 'first_name',  'dt' => 1 ),
  	array( 'db' => 'last_name',   'dt' => 2 ),
  	array( 'db' => 'email',     'dt' => 3 ),
  	array( 'db' => 'birthdate','dt' => 4 ),
  	array( 'db' => 'added','dt' => 5)
  );
  
  $sql_details = array(
  	'user' => 'xxxx',
  	'pass' => 'xxxx',
  	'db'   => 'xxxx',
  	'host' => 'localhost'
  );
  
  echo json_encode(
  	$authors = SSP::simple($_GET, $sql_details, $table, $primaryKey, $columns )
  );

นักพัฒนาท่านใดที่ต้องการทดสอบเพิ่มเติม อาจจะลองเพิ่ม row และ column หรืออาจจะเพิ่มการ join ข้อมูลจาก 1 ตาราง เป็น 2 3 ตารางดูครับ เพราะในการใช้งานจริง ข้อมูลที่ใช้แสดงผลอาจจะไม่ได้มาจากตารางเดียว
สำหรับฐานข้อมูลในการทดสอบ สามารถเข้าไปทำ database generate ได้ที่เว็บไซต์ filldb.info ได้เลยครับ