Tag Archive table

Byphunsanit

Tabulator: data.table.custom

ถ้า 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