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;
+            }
+        },
+    ],
+})