[英]How to use JavaScript, Ajax or jQuery to display array data in table
[英]How to use with Data Table jQuery with ajax?
我真的需要您的帮助。 我是jQuery DataTable的新手。 我正在做的是,我有一个返回JSON响应的网址(后端laravel php),如下所示:
[
{"kode_pt":1,"nama":"title","SK_path":"\/folder","email_PJ":"\/images","validasi":0},
{"kode_pt":2,"nama":"title","SK_path":"\/folder","email_PJ":"\/images","validasi":0}
]
我目前正在使用ajax jquery来获取数据,并将其动态添加到表中。 像这样:
var content="";
$.ajax({
url: '{{route('get.pt')}}',
method: "GET",
dataType: "json",
success: function(data){
for(i=0; i<data.length; i++){
content+='<tr>'+
'<td>'+data[i].kode_pt+'</td>'+
'<td>'+data[i].nama+'</td>'+
'<td>'+data[i].validasi+'</td>'
+'<td><button id="accept" data-id='+data[i].kode_pt+' class="btn btn-success">Accept</button><button data-id='+data[i].kode_pt+' class="btn btn-danger">Decline</button><button id="view" data-id='+data[i].kode_pt+' class="btn btn-info">View</button></td>';
}
$("#verify-pt-body").html(content);
},
error: function(){
console.log("Ajax Error - getPT");
}
});
有用。 但是,当我使用数据表的排序和搜索功能时,屏幕上显示的数据消失了。 浏览后,事实证明我无法将其应用于表格。 我必须使用DataTable的函数来检索json。 我需要帮助。 我查看了一些文档,但未能使其正常运行。 帮助将不胜感激!
我尝试但失败的数据表的语法:
$('#dataTable-verify-pt').DataTable({
responsive: true,
ajax:{
url: '{{route('get.pt')}}'
},
columns:[
{data: "kode_pt"},
{data: "nama"},
{data: "validasi"},
]
});
这是我尝试使用DataTable实现的格式:
该文档使用以下语法:
$('#dataTable-verify-pt').DataTable({
responsive: true,
ajax: "{{route('get.pt')}}",
columns:[
{data: "kode_pt"},
{data: "nama"},
{data: "validasi"},
]
});
编辑
您需要修改您的响应,所以它是一个像这样的对象:
{
"data": [
{"kode_pt":1,"nama":"title","SK_path":"\/folder","email_PJ":"\/images","validasi":0},
{"kode_pt":2,"nama":"title","SK_path":"\/folder","email_PJ":"\/images","validasi":0}
]
}
编辑2
您可以通过如下修改响应来实现:
return response()->json(['data' => $data]);
试试吧 !!
var queryData = {
//yourinput parameter
}
$.ajax({
type : "GET",
url : "your url",
data : queryData,
timeout : 100000,
success : function(data) {
console.log("SUCCESS: ", data);
setData(data); //call function & pass your JSON data to it.
},
error : function(e) {
console.log("ERROR: ", e);
display(e);
},
done : function(e) {
console.log("DONE");
}
});
函数setData(data){
var salearr = JSON.parse(JSON.stringify(data)); //parse JSON data.
//create datatable dynamically on the fly
var tableStr = ' ';
tableStr += "<table id=mydatatable class=mydatatable border=\"1\" class=\"display\" style='border-collapse: collapse; border-spacing: 0;background:#FFFFFF'>"+
//your table header appears here
//access JSON parsed data using for loop
for(var k=0; k<salearr.length; k++) {
//your code with dynamic html
}
and finally apply dataTable to it!!
$("#mydatatable").dataTable();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.