Update data_gc_tab.html

data_gc_tab.html

@@ -6,86 +6,86 @@
     <title>Tabulator Example</title>
     <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
     <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
-   <style>
-    body {
-        font-family: Arial, sans-serif;
-        text-align: center;
-        background-color: #f0f0f0;
-        margin: 0;
-        padding: 0;
-    }
-    h1 {
-        background-color: #4CAF50;
-        color: white;
-        padding: 20px;
-        margin: 0;
-        border-bottom: 2px solid #388E3C;
-        font-size: 28px;
-        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-    }
-    button[type="submit"] {
-        color: white;
-        background-color: #4CAF50;
-        border: none;
-        cursor: pointer;
-        padding: 10px 20px;
-        font-size: 16px;
-        border-radius: 5px;
-        margin-top: 20px;
-        transition: background-color 0.3s ease;
-    }
-    button[type="submit"]:hover {
-        background-color: #388E3C;
-    }
-    #mediaContainer {
-        margin-top: 20px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        max-width: 100%;
-        height: auto;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        border-radius: 10px;
-        padding: 20px;
-        background-color: white;
-    }
-    #mediaContainer img, #mediaContainer video {
-        max-width: 100%;
-        height: auto;
-        object-fit: contain;
-        border-radius: 10px;
-    }
-    #imageUrl {
-        margin-top: 20px;
-        font-size: 16px;
-        color: #333;
-        cursor: pointer;
-        text-decoration: underline;
-        transition: color 0.3s ease;
-    }
-    #imageUrl:hover {
-        color: #4CAF50;
-    }
-    #progressBarContainer {
-        width: 80%;
-        margin: 20px auto;
-        background-color: #ddd;
-        border-radius: 13px;
-        padding: 3px;
-        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
-    }
-    #progressBar {
-        width: 0%;
-        height: 20px;
-        background-color: #4CAF50;
-        border-radius: 10px;
-        text-align: center;
-        line-height: 20px;
-        color: white;
-        transition: width 0.3s ease;
-    }
-</style>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #f0f0f0;
+            margin: 0;
+            padding: 0;
+        }
+        h1 {
+            background-color: #4CAF50;
+            color: white;
+            padding: 20px;
+            margin: 0;
+            border-bottom: 2px solid #388E3C;
+            font-size: 28px;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+        }
+        button[type="submit"] {
+            color: white;
+            background-color: #4CAF50;
+            border: none;
+            cursor: pointer;
+            padding: 10px 20px;
+            font-size: 16px;
+            border-radius: 5px;
+            margin-top: 20px;
+            transition: background-color 0.3s ease;
+        }
+        button[type="submit"]:hover {
+            background-color: #388E3C;
+        }
+        #mediaContainer {
+            margin-top: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            max-width: 100%;
+            height: auto;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            border-radius: 10px;
+            padding: 20px;
+            background-color: white;
+        }
+        #mediaContainer img, #mediaContainer video {
+            max-width: 100%;
+            height: auto;
+            object-fit: contain;
+            border-radius: 10px;
+        }
+        #imageUrl {
+            margin-top: 20px;
+            font-size: 16px;
+            color: #333;
+            cursor: pointer;
+            text-decoration: underline;
+            transition: color 0.3s ease;
+        }
+        #imageUrl:hover {
+            color: #4CAF50;
+        }
+        #progressBarContainer {
+            width: 80%;
+            margin: 20px auto;
+            background-color: #ddd;
+            border-radius: 13px;
+            padding: 3px;
+            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+        }
+        #progressBar {
+            width: 0%;
+            height: 20px;
+            background-color: #4CAF50;
+            border-radius: 10px;
+            text-align: center;
+            line-height: 20px;
+            color: white;
+            transition: width 0.3s ease;
+        }
+    </style>
 </head>
 <body>
     <div id="header">
@@ -94,20 +94,21 @@
     <div id="example-table"></div>
 
     <script>
-        var tableData = [
-            {id:1, name:"Billy Bob", mail:"[email protected]", phone:"79132927290"},
-            {id:2, name:"Mary May", mail:"micoght@gmail.com", phone:"79154442211"},
-        ];
-
-        var table = new Tabulator("#example-table", {
-            data: tableData, // set initial table data
-            layout: "fitColumns", // fit columns to width of table
-            columns: [
-                {title:"Имя", field:"name"},
-                {title:"Почта", field:"mail"},
-                {title:"Телнфон", field:"phone"},
-
-            ],
+        document.addEventListener('DOMContentLoaded', function() {
+            fetch('http://your-server-url/data_gc_tab_out?api_sys=your_api_key')
+                .then(response => response.json())
+                .then(data => {
+                    var table = new Tabulator("#example-table", {
+                        data: data, // set table data
+                        layout: "fitColumns", // fit columns to width of table
+                        columns: [
+                            {title:"Имя", field:"name"},
+                            {title:"Почта", field:"email"},
+                            {title:"Телефон", field:"phone"},
+                        ],
+                    });
+                })
+                .catch(error => console.error('Error fetching data:', error));
         });
     </script>
 </body>