การใช้งาน Show data table ในภาษา JavaScript แบบง่ายๆ พร้อมตัวอย่าง

การใช้งาน Data Table ใน JavaScript แบบง่ายๆ

การแสดงข้อมูลในรูปแบบตาราง (Data Table) เป็นหนึ่งในวิธีการนำเสนอข้อมูลที่พบได้ทั่วไปในเว็บแอพพลิเคชัน หรือระบบสารสนเทศต่างๆ เนื่องจากผู้ใช้สามารถมองเห็นข้อมูลได้อย่างชัดเจนและเปรียบเทียบข้อมูลกันได้ง่าย ในภาษา JavaScript มีหลายวิธีในการสร้าง Data Table ทั้งใช้ฟิวเจอร์มาตรฐานของภาษา, ใช้เฟรมเวิร์ก, หรือติดตั้งไลบรารีเพิ่มเติม เราจะดูกันว่าการสร้าง Data Table สามารถทำได้ง่ายๆ อย่างไรผ่าน 3 ตัวอย่างโค้ดพร้อมอธิบายการทำงานและนำเสนอ Use Case ในโลกจริง

ตัวอย่างที่ 1: การสร้าง Data Table ด้วย HTML และ JavaScript

 // สมมุติว่ามีข้อมูล JSON ที่ได้จาก Server
const data = [
  { id: 1, name: 'John Doe', email: 'john@example.com' },
  { id: 2, name: 'Jane Doe', email: 'jane@example.com' },
];

// สร้างฟังก์ชันเพื่อแสดงข้อมูลในรูปแบบตาราง
function createDataTable(data) {
  const table = document.createElement('table');
  table.classList.add('data-table');
  const thead = table.createTHead();
  const tbody = table.createTBody();

  // สร้างหัวตาราง
  const headRow = thead.insertRow();
  ['ID', 'Name', 'Email'].forEach(text => {
    const th = document.createElement('th');
    th.appendChild(document.createTextNode(text));
    headRow.appendChild(th);
  });

  // แทรกข้อมูลแต่ละแถว
  data.forEach(item => {
    const row = tbody.insertRow();
    Object.values(item).forEach(text => {
      const td = row.insertCell();
      td.appendChild(document.createTextNode(text));
    });
  });

  // แทรกตารางลงใน HTML
  document.getElementById('dataTableContainer').appendChild(table);
}

// เรียกใช้ฟังก์ชันเมื่อต้องการแสดงตาราง
createDataTable(data);

ในตัวอย่างนี้เราสร้างฟังก์ชัน `createDataTable` เพื่อสร้างตารางโดยใช้ DOM manipulation ใน JavaScript ซึ่งจะอ่านข้อมูลมาจาก array ของ object แล้วสร้างแต่ละแถวของตารางทีละแถว หัวตารางจะถูกสร้างขึ้นก่อนในส่วน `` แล้วก็ทำการเพิ่มข้อมูลในแต่ละ ``.

Use Case:

ตัวอย่างที่ 2: การใช้งานไลบรารี jQuery และ DataTables

การใช้ไลบรารี JavaScript ยอดนิยมอย่าง jQuery ร่วมกับปลั๊กอิน DataTables ช่วยให้การสร้าง Data Table ทำได้รวดเร็วและมีฟีเจอร์พร้อมใช้งานมากมายอย่างเช่นการค้นหา, การแบ่งหน้า, และการเรียงข้อมูล.

 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>

<table id="myDataTable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
</table>

<script>
$(document).ready( function () {
    $('#myDataTable').DataTable({
        data: data,
        columns: [
            { data: 'id' },
            { data: 'name' },
            { data: 'email' }
        ]
    });
});
</script>

Use Case:

ตัวอย่างที่ 3: การใช้งาน Vue.js สำหรับสร้าง Data Table

Vue.js เป็นเฟรมเวิร์กที่เรียบง่ายและทรงพลังสำหรับสร้างหน้าต่างๆ ในเว็บแอพพลิเคชัน ซึ่งรวมถึงการสร้าง Data Table.

 <div id="vueDataTableApp">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.email }}</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
  el: '#vueDataTableApp',
  data: {
    items: data
  }
});
</script>

ในตัวอย่างนี้ เราใช้ Vue.js เพื่อเชื่อมโยงข้อมูล `items` กับตาราง HTML ผ่าน directive `v-for` ทำให้เราสามารถนำข้อมูลจากอาเรย์มาแสดงในแต่ละแถวของตารางได้อย่างง่ายดาย.

Use Case:

การสร้าง Data Table ใช้งานในทุกสถานการณ์ที่ต้องการการจัดการข้อมูลที่เข้าใจง่าย และเป็นมิตรกับผู้ใช้ ไม่ว่าคุณจะเป็นนักพัฒนาที่หัดใหม่หรือมืออาชีพ คุณสามารถนำความรู้ที่ได้ไปปรับใช้กับการพัฒนาเว็บแอพพลิเคชันของคุณได้ทันที

และหากคุณสนใจในการพัฒนาเว็บแอพพลิเคชันและต้องการเรียนรู้การเขียนโค้ดอย่างมีประสิทธิภาพ, EPT (Expert-Programming-Tutor) พร้อมที่จะนำพาคุณเข้าสู่โลกของการพัฒนาโปรแกรมด้วยหลักสูตรที่มีคุณภาพและการดูแลที่เข้าใจง่าย มาร่วมสร้างสรรค์ผลงานทางด้าน IT กับเราสิ ประตูสู่โลกแห่งการเขียนโปรแกรมกำลังรอคุณอยู่!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง