Tabulator: data.JSON

Byphunsanit

AJAX, API, data, JSON, table, Tabulator, ดาต้า

Tabulator: data.JSON

ตัวอย่างการใช้ Tabulator ดึงดาต้าจาก JSON API มาแสดงเป็นตารางหรือที่เรียกกันว่า AJAX
Tabulator/data.JSON.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.JSON</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>
    <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>
        // Tabulator setup with AJAX
        var table = new Tabulator("#tabulator-table", {
            ajaxURL: "../assets/ISO-4217.json",
            ajaxConfig: "GET",
            columns: [
                {
                    field: "code",
                    title: "Code",
                    width: 80
                },
                {
                    field: "currency",
                    title: "Currency"
                },
                {
                    field: "digits",
                    title: "Digits",
                    width: 80
                },
                {
                    field: "numeric",
                    title: "Numeric",
                    width: 80
                },
                {
                    field: "locations",
                    formatter: function (cell) { return cell.getValue().join(", "); },
                    title: "Locations"
                }
            ],
        });
    </script>
</body>

</html>

About the author

phunsanit administrator

Archives

คลังเก็บ