istek-widuri/widuri-client
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: istek-widuri:588a1d0a90db4913a26f1b3edff0b27aa890462e
Branches Tags
istek-widuri:master
istek-widuri:pagi
...
compare: istek-widuri:65f4657d4da0fda4b0c15d1020c0df3271e294a5
Branches Tags
istek-widuri:pagi
istek-widuri:master

2 Commits
588a1d0a90 ... 65f4657d4d

Author SHA1 Message Date
Dita Aji Pratama
65f4657d4d Persiapan untuk fitur Create, Update, dan Delete 2025-06-10 11:24:02 +07:00
Dita Aji Pratama
f2975a0089 Fetch data dari API 2025-06-10 11:14:55 +07:00
2 changed files with 48 additions and 3 deletions
Show Stats Expand all files Collapse all files

9
index.html
View File

@ -4,12 +4,17 @@
<link rel="stylesheet" href="//cdn.datatables.net/2.3.2/css/dataTables.dataTables.min.css"> <link rel="stylesheet" href="//cdn.datatables.net/2.3.2/css/dataTables.dataTables.min.css">
</head> </head>
<body> <body>
<input type="text" placeholder="Name" />
<input type="text" placeholder="Phone" />
<button>Create</button>
<hr>
<table id="table-list"> <table id="table-list">
<thead> <thead>
<tr> <tr>
<th>ID</th> <th>ID</th>
<th>Name</th> <th>Name</th>
<th>Phone</th> <th>Phone</th>
<th>Act</th>
</tr> </tr>
</thead> </thead>
@ -20,9 +25,7 @@
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <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="//cdn.datatables.net/2.3.2/js/dataTables.min.js"></script>
<script src="js/carrack.js"></script> <script src="js/carrack.js"></script>
<script> <script src="js/data.js"></script>
var table = $('#table-list').DataTable({})
</script>
</body> </body>
</html> </html>

42
js/data.js Normal file
View File

@ -0,0 +1,42 @@
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;
}
},
{
"data": null,
"render": function(data, type, row) {
return `<button>Update</button> <button>Delete</button>`;
}
},
],
})