Laden dataTable. Erfolgreiche AJAX-Anfrage, aber keine Daten sichtbar

Question

Wie lade ich Json-Daten mit serverseitiger Verarbeitung in einer DataTable?

Ich versuche, ein benutzerdefiniertes Wordpress-Plugin zu erstellen und Ergebnisse von wpdb in einer DataTable anzuzeigen. Ich bekomme eine erfolgreich AJAX-Rückruf, aber die DataTable zeigt nur eine "Verarbeitung ..." Bühne und die Tabelle füllt nicht die Zeilen (leer).

Obwohl ich viele (!) Ähnliche Probleme und Antworten hier gelesen habe, wird jede Hilfe zum Laden von Daten mit Ajax und Json_encode sehr geschätzt. Der aktuelle Code:

dahsboard.php

<table id="table-id" cellpadding="1" cellspacing="1" width="100%"> 
    <thead><tr> 
     <th>h_id</th> 
     <th>h_subject</th> 
    </tr></thead> 

Ajax-grid-data.php

add_action('wp_ajax_my_action', 'my_action_callback'); 
function my_action_callback(){ 
    global $wpdb; 

    $query = "SELECT h_id, h_subject FROM wp_tablename ORDER BY h_id limit 3"; 
    $myrows = $wpdb->get_results($query); 
     foreach ($myrows as $value) { 
      $ResultData['h_id'] = $value->h_id; 
      $ResultData['h_subject'] = $value->h_subject; 
      $data[] = $ResultData; 
     } 

    $json_data = array(
      "draw"   => 1, 
      "recordsTotal" => 3, 
      "recordsFiltered" => 3, 
      "data"   => $data, 
    ); 

    echo json_encode($json_data); 
    die(); 
} 

Ich denke, dass das Problem unter in Datentyp Formatierung:

dashboard.js

var oTable; 
jQuery(document).ready(function() { 
    jQuery.fn.dataTable.ext.errMode = 'throw'; 
    oTable = jQuery('#table-id').DataTable({ 
     "serverSide": true, 
     "processing": true, 
     "columnDefs": [{"defaultContent": "-","targets": "_all"}], 
     "columns": [ 
      { "data": "h_id" } , 
      { "data": "h_subject" } 
     ], 

     "ajax":{ 
      url: "admin-ajax.php?action=my_action", 
      type: "post", 
      dataSrc:'', 
      dataType : "json", 
      contentType: "application/json; charset=utf-8", 

       //dataSrc: function(data){ return data.data; }, 
       //async : false, 
       //processData: true, 
       //accepts: {json: "application/json, text/javascript"}, 

      success: function(data){ 
       console.log(JSON.stringify(data)); // successful echo data objects are shown in dashboard. 
      }, 
      error: function(){ 
       jQuery("#tablename").append('<tbody class="grid-error"><tr><th colspan="2">No results.</th></tr></tbody>'); 
       jQuery("#tablename_processing").css("display","none"); 
      } 
     }, 

    }); 
}); 

Aktuelle Ergebnisse

Ergebnis PHP-Datei-Test: .../wp-admin/admin-ajax.php action = My_Action

{"draw":1,"recordsTotal":3,"recordsFiltered":3,"data":[{"h_id":"37168","h_subject":"6216"},{"h_id":"37169","h_subject":"7021"},{"h_id":"37170","h_subject":"8923"}]} 

Ergebnis Ajax Erfolgsfunktion, Konsolendaten:

{"draw":1,"recordsTotal":3,"recordsFiltered":3,"data":[{"h_id":"37168","h_subject":"6216"},{"h_id":"37169","h_subject":"7021"},{"h_id":"37170","h_subject":"8923"}]} 

Ergebnis Armaturenbrett Tabelle zeigt nur: processing...

Answer 1

Löschen der dataSrc und success function hat Wunder getan und füllt die DataTable mit Daten. Ich schätze die Hilfe und Bemühungen von @bassxzero und @ davidkonrad.

Sicherstellen, dass es eine Antwort ist, "im Auftrag von" der neuen Version von dashboard.js:

var oTable; 
jQuery(document).ready(function() { 
jQuery.fn.dataTable.ext.errMode = 'throw'; 
oTable = jQuery('#table-id').DataTable({ 
    "serverSide": true, 
    "processing": true, 
    "columnDefs": [{"defaultContent": "-","targets": "_all"}], 
    "columns": [ 
     { "data": "h_id" } , 
     { "data": "h_subject" } 
    ], 

    "ajax":{ 
     url: "admin-ajax.php?action=my_action", 
     type: "post", 
     dataType : "json", 
     contentType: "application/json; charset=utf-8", 
     error: function(){ 
      jQuery("#tablename").append('<tbody class="grid-error"><tr><th colspan="2">No results.</th></tr></tbody>'); 
      jQuery("#tablename_processing").css("display","none"); 
     } 
    }, 

}); 

});