Programim dhe zhvillim, javascript, python, php, html

Tabelat e postimit të PHP Ajax

Po përpiqem të plotësoj një tabelë të dhënash (datatables.net). Unë kam një fushë që shkakton një kërkesë postimi ajax pas një ndryshimi.

Ky është kodi 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' }
            ]
        });             
    })  
})

Tani në php, po marr disa të dhëna nga api alphavantage që më jep një grup që duket kështu: Përditëso: json i ri duket kështu:

{"data":[{"symbol":"WST","name":"West Pharmaceutical Services Inc.","type":"Equity","region":"United States","currency":"USD","matchScore":"1.0000"},{"symbol":"WSTL","name":"Westell Technologies Inc.","type":"Equity","region":"United States","currency":"USD","matchScore":"0.8571"},{"symbol":"WSTG","name":"Wayside Technology Group Inc.","type":"Equity","region":"United States","currency":"USD","matchScore":"0.8571"},{"symbol":"WSTAX","name":"Ivy Science And Technology Fund Class A","type":"Mutual Fund","region":"United States","currency":"USD","matchScore":"0.7500"},{"symbol":"WSTYX","name":"Ivy Science And Technology Fund Class Y","type":"Mutual Fund","region":"United States","currency":"USD","matchScore":"0.7500"},{"symbol":"WSTRF","name":"Western Uranium & Vanadium Corp.","type":"Equity","region":"United States","currency":"USD","matchScore":"0.7500"},{"symbol":"WSTCX","name":"Ivy Science And Technology Fund Class C","type":"Mutual Fund","region":"United States","currency":"USD","matchScore":"0.7500"},{"symbol":"WAMIX","name":"WSTCM Credit Select Risk - Managed Fund Institutional Shares","type":"Mutual Fund","region":"United States","currency":"USD","matchScore":"0.7500"},{"symbol":"WSTBX","name":"Ivy Science And Technology Fund Class B","type":"Mutual Fund","region":"United States","currency":"USD","matchScore":"0.2500"}]}

Dhe ky është kodi php:

//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);

Tabelat e të dhënave thjesht tregojnë përpunimin dhe nuk janë të mbushura fare. Mendoj se diçka nuk është në rregull me formatimin e grupit apo jo? Apo keni ndonjë sugjerim tjetër? Çdo ndihmë do të vlerësohej vërtet, sepse nëse nuk keni ide se si të vazhdoni me këtë problem.

12.11.2020

  • Duket se nuk po bëni asgjë në funksionin tuaj success... 13.11.2020

Përgjigjet:


1

Bazuar në informacionin në pyetje, unë mund të shoh 3 probleme - por mund të ketë artikuj shtesë që fshihen pas këtyre 3 gjërave:

1. Emërtimi i burimit të të dhënave

Në JSON tuaj, ju keni këtë në fillim:

{"data:":[{"1. symbol":"WST","2. name"...

Në mënyrë të veçantë, emri i grupit është data:. Vini re dy pika e cila është pjesë e emrit.

Si parazgjedhje, dataTables pret që grupi të emërtohet data jo data:.

Pra, mund ta hiqni atë dy pika shtesë nga burimi JSON, ose mund të përcaktoni data: si emrin e burimit të të dhënave në seksionin tuaj ajax:

dataSrc: 'data:'

Unë do të rekomandoja vetëm heqjen e zorrës së trashë.

2. Çiftet e emrit/vlerës në JSON

Një objekt tipik në JSON tuaj është ky:

{
  "1. symbol":"WST",
  "2. name":"West Pharmaceutical Services Inc.",
  "3. type":"Equity",
  ...
  "9. matchScore":"1.0000"
}

Vini re se si çdo emër përfshin një pikë - për shembull, ."1. symbol". Në DataTables, kjo pikë interpretohet si një navigator, për zbritjen në JSON i vendosur.

Zgjidhja është të hiqni këto pika nga emrat në JSON tuaj burimor.

Unë do të rekomandoja përdorimin e "symbol" në vend të "1. symbol".

Nëse dëshironi të shfaqni simbolin 1. si një titull aktual në tabelën tuaj, mund ta kodoni atë në HTML ose përdorni opsionin DataTables columns - për shembull:

columns: [
  { title: '1. Symbol',
    data: 'symbol' },
  { title: '2. Name',
    data: 'name' },
  { title: '3. Type',
    data: 'type' }
]

3. Përpunimi nga ana e serverit

2 rregullimet e mësipërme duhet t'ju lejojnë të shihni të dhënat tuaja. Por ju ende do të shihni artikuj të papritur si më poshtë:

Showing 0 to 0 of 0 entries (filtered from NaN total entries)

Kjo ndodh sepse kur përdorni serverSide: true, duhet të siguroni disa fusha shtesë në JSON të dërguara nga serveri te DataTables.

Mund të shihni një shembull këtu. Në mënyrë të veçantë, shikoni seksionin e të dhënave të kthyera.

Për shembull, për shkak se keni zgjedhur të përdorni serverSide: true, serveri duhet t'i tregojë DataTables se sa regjistrime totale ka dhe sa regjistrime të filtruara. Serveri gjithashtu duhet të trajtojë të gjitha klasifikimet dhe filtrimin.

Shikoni gjithashtu seksionin e parametrave të dërguar, në mënyrë që të kuptoni se çfarë informacioni dërgohet nga DataTables në server. Kjo është mënyra se si DataTables i tregon serverit se çfarë vlerash klasifikimi/filtrimi/pagimi ka klikuar ose futur përdoruesi.

Unë do të rekomandoja të filloni me serverSide: false - dhe fillimisht ta bëni atë të funksionojë si duhet, përpara se të përmirësoni tabelën për të përdorur serverSide: true.

12.11.2020
  • Kjo shpjegon shumë. Do ta provoj sa më shpejt. Faleminderit shumë për përgjigjen e detajuar! 13.11.2020
  • Kështu që i rregullova problemet që përmendët më lart (shih postimin e përditësuar). Fatkeqësisht ende nuk ka të dhëna të ngarkuara. Ndonjë ide çfarë nuk shkon? Tabela e të dhënave sapo shfaq ngarkimin... Konsola thotë Uncaught TypeError: url.indexOf nuk është një funksion 15.11.2020
  • Unë tani shtova gjithashtu të gjithë kodin .js, po ngarkoj tabelën në një funksion gati jquery, nuk jam i sigurt nëse kjo shkakton probleme. Kur i kodova të dhënat, tabela u shfaq saktë... 15.11.2020
  • Sugjerimi im është të filloni me një faqe të zbrazët dhe të shtoni vetëm tabelën e të dhënave (seksionin tuaj të ngarkuar të tabelës së të dhënave). Filloni të funksionojë. Më pas filloni të shtoni funksionalitet shtesë hap pas hapi. 15.11.2020
  • Materiale të reja

    Masterclass Coroutines: Kapitulli-3: Anulimi i korutinave dhe trajtimi i përjashtimeve.
    Mirë se vini në udhëzuesin gjithëpërfshirës mbi Kotlin Coroutines! Në këtë seri artikujsh, unë do t'ju çoj në një udhëtim magjepsës, duke filluar nga bazat dhe gradualisht duke u thelluar në..

    Faketojeni derisa ta arrini me të dhënat false
    A e gjeni ndonjëherë veten duke ndërtuar një aplikacion të ri dhe keni nevojë për të dhëna testimi që duken dhe duken më realiste ose një grup i madh të dhënash për performancën e ngarkesës...

    Si të përdorni kërkesën API në Python
    Kërkesë API në GitHub për të marrë depot e përdoruesve duke përdorur Python. Në këtë artikull, unë shpjegoj procesin hap pas hapi për të trajtuar një kërkesë API për të marrë të dhëna nga..

    Një udhëzues hap pas hapi për të zotëruar React
    Në këtë artikull, do të mësoni se si të krijoni aplikacionin React, do të mësoni se si funksionon React dhe konceptet thelbësore që duhet të dini për të ndërtuar aplikacione React. Learning..

    AI dhe Psikologjia — Pjesa 2
    Në pjesën 2 të serisë sonë të AI dhe Psikologji ne diskutojmë se si makineritë mbledhin dhe përpunojnë të dhëna për të mësuar emocione dhe ndjenja të ndryshme në mendjen e njeriut, duke ndihmuar..

    Esencialet e punës ditore të kodit tim VS
    Shtesat e mia të preferuara - Git Graph 💹 Kjo shtesë është vërtet e mahnitshme, e përdor përpara se të filloj të punoj për të kontrolluar dy herë ndryshimet dhe degët më të fundit, mund të..

    Pse Python? Zbulimi i fuqisë së gjithanshme të një gjiganti programues
    Në peizazhin gjithnjë në zhvillim të gjuhëve të programimit, Python është shfaqur si një forcë dominuese. Rritja e tij meteorike nuk është rastësi. Joshja e Python qëndron në thjeshtësinë,..