Export ข้อมูลจาก DataTable

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
โพสต์: 361
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

Export ข้อมูลจาก DataTable

โพสต์ที่ยังไม่ได้อ่าน โดย abdkode »

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
datatble.png (33.04 KiB) Viewed 4261 times
และเมื่อเราทดลองกดปุ่ม print ก็สามารถปรินต์ได้ เช่นเดียวกับปุ่มอื่นๆ (excel,pdf,copy)

ผลลัพธ์ เมื่อกดปุ่ม 'print'
print.png
print.png (31.38 KiB) Viewed 4261 times

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery & Javascript
-สอนการใช้งาน jQuery & Ajax
-ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
-บทเรียน jQuery
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 27