CRUD selesai
This commit is contained in:
parent
65f4657d4d
commit
cc558ad78a
@ -4,9 +4,9 @@
|
||||
<link rel="stylesheet" href="//cdn.datatables.net/2.3.2/css/dataTables.dataTables.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<input type="text" placeholder="Name" />
|
||||
<input type="text" placeholder="Phone" />
|
||||
<button>Create</button>
|
||||
<input id="form-add-name" type="text" placeholder="Name" />
|
||||
<input id="form-add-phone" type="text" placeholder="Phone" />
|
||||
<button type="button" onclick="buttonAdd()">Create</button>
|
||||
<hr>
|
||||
<table id="table-list">
|
||||
<thead>
|
||||
|
52
js/data.js
52
js/data.js
@ -1,3 +1,7 @@
|
||||
function buttonAct(id) {
|
||||
return `<button onclick="buttonEdit(${id})">Update</button> <button onclick="buttonRemove(${id})">Delete</button>`
|
||||
}
|
||||
|
||||
var table = $('#table-list').DataTable({
|
||||
"ajax": {
|
||||
"url": "http://localhost:11000/api/read",
|
||||
@ -23,20 +27,62 @@ var table = $('#table-list').DataTable({
|
||||
{
|
||||
"data": "name",
|
||||
"render": function(data, type, row) {
|
||||
return data;
|
||||
return `<input id="form-edit-name-${row.id}" value="${data}">`;
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": "phone",
|
||||
"render": function(data, type, row) {
|
||||
return data;
|
||||
return `<input id="form-edit-phone-${row.id}" value="${data}">`;
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": null,
|
||||
"render": function(data, type, row) {
|
||||
return `<button>Update</button> <button>Delete</button>`;
|
||||
return buttonAct(row.id);
|
||||
}
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
function buttonAdd() {
|
||||
var name = document.getElementById("form-add-name").value;
|
||||
var phone = document.getElementById("form-add-phone").value;
|
||||
var url = "http://localhost:11000/api/create";
|
||||
var payload = {
|
||||
"name":name,
|
||||
"phone":phone
|
||||
}
|
||||
sendHttpRequest(url, "POST", payload, function (error, response) {
|
||||
if (error) console.error(`Error: ${error}`);
|
||||
else table.ajax.reload(null, false);
|
||||
}, "application/json");
|
||||
}
|
||||
|
||||
function buttonEdit(key) {
|
||||
var name = document.getElementById(`form-edit-name-${key}`).value;
|
||||
var phone = document.getElementById(`form-edit-phone-${key}`).value;
|
||||
var url = "http://localhost:11000/api/update";
|
||||
var payload = {
|
||||
"key":key,
|
||||
"name":name,
|
||||
"phone":phone
|
||||
}
|
||||
sendHttpRequest(url, "POST", payload, function (error, response) {
|
||||
if (error) console.error(`Error: ${error}`);
|
||||
else table.ajax.reload(null, false);
|
||||
}, "application/json");
|
||||
alert("Data berhasil dirubah");
|
||||
}
|
||||
|
||||
function buttonRemove(key) {
|
||||
var url = "http://localhost:11000/api/delete";
|
||||
var payload = {
|
||||
"key":key
|
||||
}
|
||||
sendHttpRequest(url, "POST", payload, function (error, response) {
|
||||
if (error) console.error(`Error: ${error}`);
|
||||
else table.ajax.reload(null, false);
|
||||
}, "application/json");
|
||||
alert("Data berhasil dihapus, permanent, selamanya!");
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user