การจัดการ Table ด้วย DataTables แบบ So easy

ก่อนจะไปเริ่มเรียนรู้การใช้งาน DataTables นั้นเรามาเริ่ม install ใช้งานันก่อนเลยดีกว่า

How to install? (CDN)

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

หลังจากที่เรา install DataTables มาแล้ว เรามาเริ่มใช้งานกันเลยดีกว่า

Before use DataTables

After use DataTables

สามารถทำง่ายด้วยคำสั่ง

$(‘#example’).dataTable( );

Option of DataTables

นอกจากนี้ DataTable ยังมี Option ให้เลือกมากมายในการจัดการข้อมูล เรามายกตัวอย่างที่มีการใช้งานกันบ่อยๆก่อนเลยดีกว่า

Option โดยทั่วไปของ dataTable ที่มักใช้กัน

$(‘#example’).dataTable({
paging: true,
searching: true,
scrollX: true,
scrollํY: true,
autoWidth: false,
order: [[0, “asc”]],

} );

1. Paging ใช้ในการทำ Pagination
2. Searching ใช้ในการเพิ่มช่องค้นหาข้อมูลในตาราง
3. scrollX เลื่อนตารางในแนวนอน
4. scrollY เลื่อนตารางในแนวตั้ง
5. autoWidth ปรับความกว้างอัตโนมัติ
6. order เรียงลำดับข้อมูล โดยสามารถกำหนดว่าให้เรียงข้อมูลด้วย column ไหน เรียงลำกับแบบไหน (asc น้อยไปมาก desc มากไปน้อย)

สำหรับการเรียกใช้ข้อมูลจาก API เราจะใช้ ajax ในการเรียกข้อมูลจาก API เพื่อมาลงข้อมูลในตาราง

$(‘#example’).dataTable( {
ajax: {
url: “urlApi”,
contentType: “application/json”,
type: “POST”,
data: function ( d ) {
return JSON.stringify( d );
}
}
} );

เราสามารถใช้คำสั่ง ajax ในการเรียกข้อมูลจาก API ได้เลย สะดวกในการนำข้อมูลจาก API ต่างๆมาลง DataTable ได้อย่างง่ายดาย

ในกรณีที่ต้องการจัดข้อมูลแบบเป็นกลุ่มหล่ะ ทำไงไปดูกัน

การ install RowGroup

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.dataTables.min.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTablesrowGroup.min.js"></script>

การใช้ RowGroup

$(‘#example’).dataTable({
rowGroup: {
dataSrc: 2
}
} );

rowGroup เป็น option ของ dataTable สำหรับจัดกลุ่มของข้อมูล โดยเราจะสามารถเลือก column ที่เราจะนำไปจัดกลุ่มได้

ตั่วอย่างของ การใช้ rowGroup

จบกันไปแล้วนะครับ สำหรับการใช้ DataTable อย่างง่ายๆ ถ้ามีตรงไหนที่ผมอธิบายผิด ขออภัยไว้นำที่นี้ด้วยนะครับ และสำหรับใครที่ต้องการศึกษาวิธีการใช้งานต่อสามารถเข้าไปดูได้ที่ https://datatables.net/ ได้เลยนะครับผม