问题描述
我正在尝试填充数据表（datatables.net）。我有一个字段，在更改后会触发ajax发布请求。
这是JS代码：
jQuery(document).ready(function() {
if(window.location.href.indexOf("neuen-Trade-anlegen") > -1) {
var gf_id = 13;
}else if(window.location.href.indexOf("Trade-bearbeiten") > -1) {
var gf_id = 11;
}else{
return;
}
//Icon zu Label hinzufügen
jQuery("label[for='" + jQuery("#input_" + gf_id + "_8").attr('id') + "']").html('Name <i class="fas fa-search" id="suchen"></i>');
jQuery("label[for='" + jQuery("#input_" + gf_id + "_31").attr('id') + "']").html('Symbol <i class="fas fa-search" id="suchen2"></i>');
//modal zu seite zur klasse modalanker hinzufügen
//data-backdrop = false ist wichtig damit kein graues overlay!
//z-index damit modal über seitenmenü ist
var htmlmodal = '<div class="modal fade" id="suchen_modal" data-backdrop="false" role="dialog" aria-hidden="true" style="z-index:2000">'+
'<div class="modal-dialog modal-dialog-centered modal-lg">'+
'<div class="modal-content">'+
'<div class="modal-header">'+
'<h4>Nach Wert suchen</h4>'+
'<button type="button" class="close" data-dismiss="modal" aria-label="Close">'+
'<i aria-hidden="true" class="fas fa-times"></i>'+
'</button>'+
'</div>'+
'<div class="modal-body">'+
'<div class="container-fluid">'+
'<div class="row">'+ //zeile1
'<div class="col-9">'+ //col1
'<div class="input-group input-group-sm mb-3">'+
'<div class="input-group-prepend">'+
'<span class="input-group-text" id="inputGroup-sizing-sm"><i class="fas fa-search" id="suchen"></i></span>'+
'</div>'+
'<input type="text" id="input_symbol" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">'+
'</div>'+
'</div>'+
'</div>'+
'<div class="row">'+ //zeile2
'<div class="col-12">'+ //col1
'<table id="symbol_search_table" class="display" style="width:100%">'+
'<thead>'+
'<tr>'+
'<th>Symbol</th>'+
'<th>Name</th>'+
'<th>Type</th>'+
'<th>Region</th>'+
'<th>Währung</th>'+
'<th>Match</th>'+
'</tr>'+
'</thead>'+
'</table>'+
'</div>'+
'</div>'+
'<div class="row">'+ //zeile3
'<div class="col">'+ //col1
'1 of 3'+
'</div>'+
'<div class="col">'+ //col2
'2 of 3'+
'</div>'+
'<div class="col">'+ //col3
'3 of 3'+
'</div>'+
'</div>'+
'<div class="row">'+ //zeile4
'</div>'+
'</div>'+
'</div>'+
'<div class="modal-footer">'+
'<button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Schließen</button>'+
'<button type="button" class="btn btn-primary font-weight-bold">Übernehmen</button>'+
'</div>'+
'</div>'+
'</div>'+
'</div>';
//modalanker muss element mit klasse modalanker auf seite sein
// Inserting the code block to wrapper element
//document.getElementById("modalanker").innerHTML = htmlmodal;
jQuery( ".modalanker" ).append( htmlmodal );
//bootstrap modal bei klick auf suchen icon öffnen
jQuery('#suchen,#suchen2').on('click',function(){
//alert("test");
jQuery('#suchen_modal').modal('show');
//jQuery('#suchen_modal').modal('show');
})
//symbol eingeben
jQuery('#input_symbol').on('change',function(){
var symbol = jQuery('#input_symbol').val();
//datatable laden
jQuery('#symbol_search_table').DataTable({
"dataSrc": 'data',"ajax": {
async: 'false',type: 'post',url: '../custom_scripts/alphavantage_api_symbol_search.PHP',data: {
symbol:symbol
}
},"columns": [
{ title: 'Symbol',data: 'symbol' },{ title: 'Name',data: 'name' },{ title: 'Type',data: 'type' },{ title: 'Region',data: 'region' },{ title: 'Währung',data: 'currency' },{ title: 'match',data: 'matchscore' }
]
});
})
})
现在在PHP中，我正在从alphavantage api获取一些数据，这给了我一个看起来像这样的数组： 更新：新的json看起来像这样：
{"data":[{"symbol":"WST","name":"West Pharmaceutical Services Inc.","type":"Equity","region":"United States","currency":"USD","matchscore":"1.0000"},{"symbol":"WSTL","name":"Westell Technologies Inc.","matchscore":"0.8571"},{"symbol":"WSTG","name":"Wayside Technology Group Inc.",{"symbol":"WSTAX","name":"Ivy Science And Technology Fund Class A","type":"Mutual Fund","matchscore":"0.7500"},{"symbol":"WSTYX","name":"Ivy Science And Technology Fund Class Y",{"symbol":"WSTRF","name":"Western Uranium & Vanadium Corp.",{"symbol":"WSTCX","name":"Ivy Science And Technology Fund Class C",{"symbol":"WAMIX","name":"WSTCM Credit Select Risk - Managed Fund Institutional Shares",{"symbol":"WSTBX","name":"Ivy Science And Technology Fund Class B","matchscore":"0.2500"}]}
//SYMBOL_SEARCH
$Feed_url = "https://www.alphavantage.co/query?function=SYMBOL_SEARCH&keywords=$symbol&apikey=$apikey";
$response = wp_remote_get( $Feed_url );
$json = wp_remote_retrieve_body( $response );
//echo ($json);
//json decodieren
$response = json_decode( $json,true );
$myarray = json_decode( $json,true );
//echo json_encode($response);
//remove bestmatches outer array
$myarray = $response['bestMatches'];
//echo json_encode($myarray);
//remove dots
$myarray = array_map(function($tag) {
return array(
'symbol' => $tag['1. symbol'],'name' => $tag['2. name'],'type' => $tag['3. type'],'region' => $tag['4. region'],'currency' => $tag['8. currency'],'matchscore' => $tag['9. matchscore']
); },$myarray);
//echo json_encode($myarray);
//put in an array named data
$data_array = array("data" => $myarray);
echo json_encode($data_array);
数据表仅显示“正在处理”，根本没有填充。我猜数组的格式有问题吗？或者您还有其他建议吗？任何帮助将不胜感激，因为如果不知道如何继续解决此问题。
解决方法
根据问题中的信息，我可以看到3个问题-但是这3件事后面可能还有其他项目：
1。命名数据源
在JSON中，您一开始就具有以下名称：
{"data:":[{"1. symbol":"WST","2. name"...
具体来说，数组的名称为data:。请注意冒号，它是名称的一部分。
默认情况下，dataTables期望将数组命名为data而不是data:。
因此，您可以从源JSON中删除该多余的冒号，也可以在data:部分中将ajax定义为数据源名称：
dataSrc: 'data:'
我建议只去除结肠。
2。 JSON中的名称/值对
您的JSON中的典型对象是：
{
"1. symbol":"WST","2. name":"West Pharmaceutical Services Inc.","3. type":"Equity",...
"9. matchScore":"1.0000"
}
请注意，每个名称如何包含点-例如.中的"1. symbol"。在DataTables中，此点被解释为导航器，用于下降到nested JSON。
解决方案是从源JSON中的名称中删除这些点。
我建议使用"symbol"而不是"1. symbol"。
如果要在表中显示“ 1.符号”作为实际标题，则可以将其硬编码到HTML中，或使用DataTables columns选项-例如：
columns: [
{ title: '1. Symbol',data: 'symbol' },{ title: '2. Name',data: 'name' },{ title: '3. Type',data: 'type' }
]
3。服务器端处理
以上2个修复程序应使您可以查看数据。但是您仍然会看到意外的项目，例如：
Showing 0 to 0 of 0 entries (filtered from NaN total entries)
这是因为在使用serverSide: true时，需要在从服务器发送到DataTables的JSON中提供一些其他字段。
您可以see an example here。具体来说，请查看“返回的数据”部分。
例如，由于您选择使用serverSide: true，因此服务器需要告知DataTables总记录数和已过滤记录数。服务器还需要处理所有排序和过滤。
还要查看“已发送参数”部分，因此您了解哪些信息从DataTables发送到服务器。这就是DataTables告诉服务器用户单击或输入的排序/筛选/分页值的方式。
我建议从serverSide: false开始-并先使其正确工作，然后再增强表格以使用serverSide: true。