นอกจากนั้น มีลูกเล่นหรือฟังชั่นมากมายที่ให้เราได้ทดลองกัน เช่น การเรียงข้อมูลเพียงคลิกโคลั่มที่ที่การ หรือการค้นหาข้อมูลที่ครอบคลุมทุกโคลั่ม
สำหรับบทความนี้ เราจะมาแนะนำวิธี export ข้อมูลจากตาราง DataTable
สามารถ export ข้อมูลได้หลายรูปแบบเพียงแค่คลิกเดียว รูปแบบที่export ได้ เช่น PDF, EXCEL, PRINT, และ COPY
ก่อนอื่น สร้างตาราง datatable ก่อน ซึ่งในที่นี้เรากำหนด id ="dataTable-studinfo" และใส่ข้อมูลในตาราง 3 คน ดังโค้ดตัวอย่าง
โค้ด: เลือกทั้งหมด
<table id="dataTable-studinfo" width="100%">
<thead>
<tr>
<th>รหัสนักศึกษา</th>
<th>ชื่อ-สกุล</th>
<th>สาขาวิชา</th>
<th>เกรดเฉลี่ย</th>
<th>ปีการศึกษา</th>
</tr>
</thead>
<tbody>
<tr>
<td>5820234005</td>
<td>มานะ จันดี</td>
<td>ICTM</td>
<td>3.40</td>
<td>2561</td>
</tr>
<tr>
<td>5820234007</td>
<td>มานี มรนา</td>
<td>ICTM</td>
<td>3.23</td>
<td>2561</td>
</tr>
<tr>
<td>5820234009</td>
<td>ใจดี กิ่ง</td>
<td>ICTM</td>
<td>3.12</td>
<td>2561</td>
</tr>
</tbody>
</table>
โค้ด: เลือกทั้งหมด
//css
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.min.css">
//script
<script src="vendor/datatables/jquery.dataTables.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
รวมทั้ง messageTop คือข้อความสำหรับกำหนดเป็นหัวข้อ
ดังโค้ดตัวอย่างนี้
โค้ด: เลือกทั้งหมด
$("#dataTable-studinfo").DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'copy',
},
{
extend: 'excel',
messageTop: 'รายชื่อนักศึกษา',
},
{
extend: 'pdf',
messageBottom: null,
},
{
extend: 'print',
title: 'รายชื่อนักศึกษา',
}
],
"oLanguage": {
"sSearch": "ค้นหา:"
}
});
ผลลัพธ์ เมื่อกดปุ่ม 'print'
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery & Javascript
-สอนการใช้งาน jQuery & Ajax
-ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
-บทเรียน jQuery