I have a web api in the url "http://jendela.data.kemdikbud.go.id/api/index.php/ccarisanggar/searchGet", and I intend to display with jquery ajax and inserted into the table, I've been trying to find a tutorial but it's hard to get it
3
-
I have tried a lot in ajax tutorial, but have not succeeded – Didi Triawan Jul 24 '17 at 8:33
-
Please let the community know about your efforts by posting the code which you've tried in your question. – 31piy Jul 24 '17 at 8:34
-
@DidiTriawan, Are you using datatable for displaying data ? – Angel Jul 24 '17 at 9:00
Add a comment
|
In your HTML tag
<table id="data">
</table>
In your script tag
var url="http://jendela.data.kemdikbud.go.id/api/index.php/ccarisanggar/searchGet";
$.ajax({
type: "GET",
url: url,
cache: false,
// data: obj_data,
success: function(res){
console.log("data",res);
//if you want to remove some feild then delete from below array
var feilds =["sanggar_id","kode_pengelolaan","nama","alamat_jalan","desa_kelurahan","kecamatan","kabupaten_kota","propinsi","lintang","bujur","tahun_berdiri","luas_tanah"];
var html='';
html+=`<thead>
<tr>`;
$.each(feilds,function(key,val){
html+=`<th class="${val}">${val}</th>`;
})
html+=`</tr>
</thead>
<tbody>`;
$.each(res.data,function(key,val){
html+=`<tr>`;
$.each(feilds,function(aaa,feild){
html+=`<th class="${val[feild]}">${val[feild]}</th>`;
})
html+=`</tr>`;
})
html+=`</tr>
</tbody>`;
$("#data").html(html);
},
});
By Jquery you can do this way
$.ajax({
url: 'http://jendela.data.kemdikbud.go.id/api/index.php/ccarisanggar/searchGet',
type: 'GET',
success: function (responce) {
// code to append into your table
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
-
Note:
success
anderror
callbacks are deprecated. Try to use promise instead. – 31piy Jul 24 '17 at 8:35
I can't show you the whole code snippet. Anyway, hope this help for you.
<table id="my_table" border='1'>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</table>
<script>
var response = [{
"column_1":"90",
"column_2":"Abc",
"column_3":"50"
},
{
"column_1":"68",
"column_2":"Cde",
"column_3":"90"
}];
$(function() {
$.each(response, function(i, item) {
$('<tr>').append(
$('<td>').text(item.column_1),
$('<td>').text(item.column_2),
$('<td>').text(item.column_3)
).appendTo('#my_table');
});
});
</script>
As mentioned I believe you are using codeigniter as your php framework.
To accomplish your task you need follow below steps :
1.) In view file for eg. myview.php add this
<div id="mydata"></div>
<script>
$.ajax({
type: "GET",
url: "http://jendela.data.kemdikbud.go.id/api/index.php/ccarisanggar/searchGet",
beforeSend: function(){
$("#mydata").html('<span style="color:green;tex-align:center;">Connecting....</span>');
},
success: function(data){
if(data!="")
{
$("#mydata").html(data);
}else{
$("#mydata").html('<span style="color:red;tex-align:center;">No data found !</span>');
}
}
});
</script>
2.)To save the data in the database either create event handler such as button clicks or you can try using setInterval function.
<button id="mybt" onclick="save_to_db()">Save to DB</button>
<script>
function save_to_db(){
//code to format data to insert into the table
$.ajax({
type:"POST",
url:"/mycontroller/insert_function" //
data:"data_to_insert",
success:function(data){
if(data=="ok"){
console.log("inserted successfully");
}
}
})
}
</script>