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

Datatables-ใช้-Ajax-โหลดข้อมูลทีละหน้าเกิน-10000-Row
Datatables-ใช้-Ajax-โหลดข้อมูลทีละหน้าเกิน-10000-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 ได้เลยครับ

Leave a Reply