วิธีเปลี่ยนหน้าในตาราง DataTables ด้วยปุ่มลูกศรซ้าย-ขวา


ด้วยความสามารถของ DataTables ที่ได้รับการยอมรับกันดีอยู่แล้วเรื่องการจัดการข้อมูลในรูปแบบตาราง ทำให้เราสามารถค้นหา, จัดเรียง, กรอง, ข้อมูลต่างๆ ได้อย่างง่ายดายมากๆ จากที่เมื่อก่อนต้องมานั่งเขียน SQL code ให้ ORDER BY ตามสิ่งที่ต้องการให้เรียง เพื่อให้ table แสดงผลได้ตามต้องการ ซึ่งก็เป็นภาระที่คนเขียน code เองต่างขยาด และไม่อยากไปเตะต้องมันอีก เพราะงานมันจุกจิกและซ้ำซาก

สิ่งที่จะแนะนำต่อจากนี้ไม่ใช่วิธีการใช้งาน dataTable แต่จะเสริมเรื่องของการใช้ "ปุ่มลูกศร" allow key บน keyboard ในการเปลี่ยนหน้า เนื่องจากรู้สึกว่ามันง่ายกว่ามานั่งคลิกไปทีละหน้าๆ ซึ่งค่อนข้างเสียเวลา มาดูวิธีที่แสนง่ายกันเลย

ตาม code นี้จะนำ API ของมันมาใช้ คือ page() และ draw() รายละเอียดตามลิงค์
Page - https://datatables.net/reference/api/page() 
Draw - https://datatables.net/reference/api/draw()
นำมาใช้งานในรูปแบบนี้
var table =  $("#tableview").DataTable();
$(document).keydown(function(e) {
    switch(e.keyCode) {
        //arrow left
        case 37: table.page( 'previous' ).draw( 'page' ); break;
        //arrow right
        case 39: table.page( 'next' ).draw( 'page' ); break;
    }
});

จากนั้นเราก็สามารถที่จะกดปุ่มลูกศร ซ้าย เพื่อย้อนกลับ และลูกศรขวา เพื่อถัดไปได้แล้ว

ป้ายกำกับ: , ,