DataTable เป็น
jQuery plug-in ที่สร้างความสะดวกในการแสดงข้อมูลออกมาเป็นตาราง เพียงแค่เขียนโค้ดไม่กี่บรรทัด
นอกจากนั้น มีลูกเล่นหรือฟังชั่นมากมายที่ให้เราได้ทดลองกัน เช่น การเรียงข้อมูลเพียงคลิกโคลั่มที่ที่การ หรือการค้นหาข้อมูลที่ครอบคลุมทุกโคลั่ม
สำหรับบทความนี้ เราจะมาแนะนำวิธี 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>
ต่อไป import สคริปต์ cdn ต่างๆที่สำคัญดังนี้
โค้ด: เลือกทั้งหมด
//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>
ใน JavaScript ให้เพิ่ม dom: 'Bfrtip' และ กำหนดปุ่มที่ต้องการ เช่น มี copy, excel, pdf, print
รวมทั้ง messageTop คือข้อความสำหรับกำหนดเป็นหัวข้อ
ดังโค้ดตัวอย่างนี้
โค้ด: เลือกทั้งหมด
$("#dataTable-studinfo").DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'copy',
},
{
extend: 'excel',
messageTop: 'รายชื่อนักศึกษา',
},
{
extend: 'pdf',
messageBottom: null,
},
{
extend: 'print',
title: 'รายชื่อนักศึกษา',
}
],
"oLanguage": {
"sSearch": "ค้นหา:"
}
});
เมื่อเปิดกับเบราเซอร์แล้ว จะมีปุ่มปรากฎขึ้นดังภาพ
- datatble.png (33.04 KiB) Viewed 4279 times
และเมื่อเราทดลองกดปุ่ม print ก็สามารถปรินต์ได้ เช่นเดียวกับปุ่มอื่นๆ (excel,pdf,copy)
ผลลัพธ์ เมื่อกดปุ่ม 'print'
- print.png (31.38 KiB) Viewed 4279 times
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery & Javascript
-
สอนการใช้งาน jQuery & Ajax
-
ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
-
บทเรียน jQuery
[url=https://www.mindphp.com/forums/viewtopic.php?f=76&t=44684&p=111808]DataTable[/url] เป็น [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-jquery/2776-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5%E0%B9%88-1-jquery-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]jQuery[/url] plug-in ที่สร้างความสะดวกในการแสดงข้อมูลออกมาเป็นตาราง เพียงแค่เขียนโค้ดไม่กี่บรรทัด
นอกจากนั้น มีลูกเล่นหรือฟังชั่นมากมายที่ให้เราได้ทดลองกัน เช่น การเรียงข้อมูลเพียงคลิกโคลั่มที่ที่การ หรือการค้นหาข้อมูลที่ครอบคลุมทุกโคลั่ม
สำหรับบทความนี้ เราจะมาแนะนำวิธี export ข้อมูลจากตาราง DataTable
สามารถ export ข้อมูลได้หลายรูปแบบเพียงแค่คลิกเดียว รูปแบบที่export ได้ เช่น PDF, [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/microsoft/6582-insert_data_from_picture_for_excle.html]EXCEL[/url], PRINT, และ COPY
ก่อนอื่น สร้างตาราง [url=https://www.mindphp.com/forums/viewtopic.php?f=76&t=44684&p=111808]datatable[/url] ก่อน ซึ่งในที่นี้เรากำหนด id ="dataTable-studinfo" และใส่ข้อมูลในตาราง 3 คน ดังโค้ดตัวอย่าง
[code]
<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>
[/code]
ต่อไป import สคริปต์ cdn ต่างๆที่สำคัญดังนี้
[code]
//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>
[/code]
ใน JavaScript ให้เพิ่ม dom: 'Bfrtip' และ กำหนดปุ่มที่ต้องการ เช่น มี copy, excel, pdf, print
รวมทั้ง messageTop คือข้อความสำหรับกำหนดเป็นหัวข้อ
ดังโค้ดตัวอย่างนี้
[code]$("#dataTable-studinfo").DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'copy',
},
{
extend: 'excel',
messageTop: 'รายชื่อนักศึกษา',
},
{
extend: 'pdf',
messageBottom: null,
},
{
extend: 'print',
title: 'รายชื่อนักศึกษา',
}
],
"oLanguage": {
"sSearch": "ค้นหา:"
}
});[/code]
เมื่อเปิดกับเบราเซอร์แล้ว จะมีปุ่มปรากฎขึ้นดังภาพ
[attachment=1]datatble.png[/attachment]
และเมื่อเราทดลองกดปุ่ม print ก็สามารถปรินต์ได้ เช่นเดียวกับปุ่มอื่นๆ (excel,pdf,copy)
ผลลัพธ์ เมื่อกดปุ่ม 'print'
[attachment=0]print.png[/attachment]
[b]ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery & Javascript[/b]
-[url=https://www.mindphp.com/forums/viewforum.php?f=78]สอนการใช้งาน jQuery & Ajax[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=18]ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-jquery.html]บทเรียน jQuery[/url]