ถ้า table ของเราทำจากตาราง html ธรรมดา ๆ สามารถแปลงเป็น Tabulator ได้ โดย Tabulator: data from html table แต่ถ้าเราต้องการที่จะ custom data เพิ่มจะทำได้อย่างไร ในตัวอย่างจะเพิ่ม score แบบสุ่มเข้าไป
snippets/Tabulator/data.table.custom.html
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tabulator: data.table.custom</title> <!-- Tabulator CSS --> <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.1/css/tabulator.min.css" integrity="sha512-RYFH4FFdhD/FdA+OVEbFVqd5ifR+Dnx2M7eWcmkcMexlIoxNgm89ieeVyHYb8xChuYBtbrasMTlo02cLnidjtQ==" crossorigin="anonymous" referrerpolicy="no-referrer" rel="stylesheet" />
</head> <body> <table id="source-table"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Surname</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Pitt</td> <td>Phunsanit</td> <td>43</td> <td>Male</td> </tr> <tr> <td>2</td> <td>พิชญ์</td> <td>พันธุ์สนิท</td> <td>43</td> <td>ชาย</td> </tr> </tbody> </table> <div id="tabulator-table"></div> <!-- Tabulator JS --> <script integrity="sha512-8+qwMD/110YLl5T2bPupMbPMXlARhei2mSxerb/0UWZuvcg4NjG7FdxzuuvDs2rBr/KCNqhyBDe8W3ykKB1dzA==" crossorigin="anonymous" referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.1/js/tabulator.min.js"></script> <script> function getTableDataFromHTML (tableId) { var table = document.getElementById (tableId) ; var rows = table.querySelectorAll ('tbody tr') ; var data = []; rows.forEach (function (row) { var cells = row.querySelectorAll ('td') ; data.push ({ id: cells[0].textContent, name: cells[1].textContent, surname: cells[2].textContent, age: cells[3].textContent, gender: cells[4].textContent, score: Math.floor (Math.random () * 101) }) ; }) ; return data; } var tableData = getTableDataFromHTML ("source-table") ; new Tabulator ("#tabulator-table", { columns: [ { field: "id", title: "ID" }, { field: "name", title: "Name" }, { field: "surname", title: "Surname" }, { field: "age", title: "Age" }, { field: "gender", title: "Gender" }, { field: "gender", title: "Gender" }, { field: "score", title: "Score" } ], data: tableData, layout: "fitColumns", pagination: true, paginationSize: 10 }) ; </script>
</body> </html>
โดย version นี้จะมีการใช้ getTableDataFromHTML อ่านตารางเองแล้วสุ่ม score ออกมาเพิ่มจากที่มีในตาราง แล้วสร้าง Tabulator จาก tableData