From f2975a008991b2dbf2b97e6c3c36b9c7705490ef Mon Sep 17 00:00:00 2001
From: Dita Aji Pratama <ditaajipratama@protonmail.com>
Date: Tue, 10 Jun 2025 11:14:55 +0700
Subject: [PATCH] Fetch data dari API

---
 index.html |  4 +---
 js/data.js | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 js/data.js

diff --git a/index.html b/index.html
index 12a85a0..52cd139 100644
--- a/index.html
+++ b/index.html
@@ -20,9 +20,7 @@
     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
     <script src="//cdn.datatables.net/2.3.2/js/dataTables.min.js"></script>
     <script src="js/carrack.js"></script>
-    <script>
-      var table = $('#table-list').DataTable({})
-    </script>
+    <script src="js/data.js"></script>
     
   </body>
 </html>
diff --git a/js/data.js b/js/data.js
new file mode 100644
index 0000000..5b1c772
--- /dev/null
+++ b/js/data.js
@@ -0,0 +1,36 @@
+var table = $('#table-list').DataTable({
+    "ajax": {
+        "url": "http://localhost:11000/api/read",
+        "type": "POST",
+        "dataSrc": "data",
+        "contentType": "application/json",
+        "data": function(d) {
+            // Customize the data payload sent in the POST request
+            return JSON.stringify({});
+        },
+        "error": function (xhr, error, thrown) {
+            console.error('Error fetching data:', thrown);
+            console.error('Response:', xhr.responseText);
+        }
+    },
+    "columns": [
+        {
+            "data": "id",
+            "render": function(data, type, row) {
+                return data;
+            }
+        },
+        {
+            "data": "name",
+            "render": function(data, type, row) {
+                return data;
+            }
+        },
+        {
+            "data": "phone",
+            "render": function(data, type, row) {
+                return data;
+            }
+        },
+    ],
+})