Datentabelle jquery + Ajax + PHP kann keine Daten in der Tabelle erhalten (serverseitige Verarbeitung)

Question

Ich bin mit Datentabelle Diesem Beispiel folgend https://datatables.net/examples/data_sources/server_side.html

Also mein Tisch ist:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="tabellaGlossario"> 
    <thead> 
     <th> 
      <td>Voce</td> 
      <td>Sinonimi</td> 
      <td>Sigla</td> 
      <td>Macrosettore</td> 
      <td>Microsettore</td>  
      <td>Sinonimi</td> 
      <td>Sigla</td> 
      <td>Macrosettore</td> 
      <td>Microsettore</td>   
     </th> 
    </thead> 
    <tfoot> 
     <th> 
      <td>Voce</td> 
      <td>Sinonimi</td> 
      <td>Sigla</td> 
      <td>Macrosettore</td> 
      <td>Microsettore</td>  
      <td>Sinonimi</td> 
      <td>Sigla</td> 
      <td>Macrosettore</td> 
      <td>Microsettore</td>   
     </th> 
    </tfoot> 
</table> 

Meine js:

oTable = $('#tabellaGlossario').dataTable({ 
     "bJQueryUI": true, 
     "sPaginationType": "full_numbers", 
     "sDom": '<""f>t<"F"lp>', 
     "processing": true, 
     "serverSide": true, 
     "ajax": "Modules/Glossario/View/Glossario.Table.View.php?lingua_select=2", 
    }); 

Meine ajax zurückgekehrt:

{ 
    "draw": 1, 
    "recordsTotal": 1, 
    "recordsFiltered": 1, 
    "data": [ 
    [ 
     "1", 
     "2", 
     "1", 
     "1", 
     "1", 
     "Parola italiana", 
     "Sinonimo italiano", 
     "Sigla ita", 
     "Note ita" 
    ] 
    ] 
} 

Mein Problem ist, dass ich immer "Keine Daten in der Tabelle verfügbar" als Tabelle Ergebnisse erhalten. Aber wie Sie sehen können, hat Ajax einige Ergebnisse (1 in diesem Beispiel). Es scheint, dass mein Code der gleiche wie der im offiziellen Beispiel ist.

Ich kann nicht verstehen, warum Daten in der Tabelle nicht angezeigt werden (und ich bekomme keinen Fehler in der Browser-Konsole).

Answer 1

Verwenden Sie ein dynamisches Laden oder irgendeine Art von Routing? Zum Beispiel angularjs ngroute oder einige Rahmen.

In diesem Fall kann es nicht funktionieren (nicht wie Sie es tun). Sie können einige Führer wie this oder Beispiel wie folgt diese http://jsfiddle.net/qu4a7j24/3/

<div ng-app='testTableApp'> 

    <div class="container"> 
     <div ng-controller="mainTable"> 
      <form action="" method="POST" class="form-horizontal" role="form"> 
       <div class="form-group"> 
        <legend>Filters</legend> 
       </div> 
       <div class="form-group"> 
        <div class="col-sm-10 col-sm-offset-2"> 
         <input type="text" value="0" ng-change='reloadData()' ng-model="start"> 
         <input type="text" value="50" ng-change='reloadData()' ng-model="end"> 

        </div> 
       </div> 
      </form> 

      <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered"></table> 
     </div> 
    </div> 
</div> 

var testTableApp = angular.module('testTableApp', ['ngRoute', 'ngResource', 'datatables', 'datatables.tabletools', 'datatables.bootstrap', 'datatables.fixedheader']); 
console.log(testTableApp); 
testTableApp.controller("mainTable", 
[ '$scope', 'DTOptionsBuilder', 'DTColumnBuilder', 
    function ($scope, DTOptionsBuilder, DTColumnBuilder){ 
     $scope.dataSource = "http://dt.ishraf.com/ajax.php"; 
     $scope.start = 0; 
     $scope.end = 5000; 


     $scope.getDataSource = function(obj,prefix){ 
      var src = $scope.dataSource; 

      var str = []; 
      for(var p in obj) { 
       if (obj.hasOwnProperty(p)) { 
        var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p]; 
        str.push(typeof v == "object" ? 
        serialize(v, k) : 
        encodeURIComponent(k) + "=" + encodeURIComponent(v)); 
       } 
      } 
      return src + "?" + str.join("&"); 
     } 

     var dsParams = { 
      start : $scope.start, 
      end : $scope.end 
     } 

     $scope.dsString = $scope.getDataSource(dsParams); 


     $scope.buildTable = function(){ 
      return DTOptionsBuilder 
       .newOptions() 
       .withOption('ajax', { 
        // Either you specify the AjaxDataProp here 
        dataSrc: 'data', 
        url: $scope.dsString, 
        type: 'POST' 
       }). 
       withOption('lengthMenu', [ 
        [10, 20, 50, 100, 150, 300, 500], 
        [10, 20, 50, 100, 150, 300, 500] 
       ])     
       .withTableTools('bower_components/datatables-tabletools/swf/copy_csv_xls_pdf.swf') 
       .withTableToolsButtons([ 
        { 
         "sExtends": "copy", 
         "sButtonText": "<i class='fa fa-copy'></i>&nbsp;|&nbsp;Copy", 
         "fnInit": function (nButton, oConfig) { 
          $(nButton).addClass('btn btn-success'); 
         } 
        }, 
        { 
         "sExtends": "print", 
         "sButtonText": "<i class='fa fa-print'></i>&nbsp;|&nbsp;Print", 
         "fnInit": function (nButton, oConfig) { 
          $(nButton).addClass('btn btn-danger'); 
         } 
        }, 
        { 
         "sExtends": "csv", 
         "sButtonText": "<i class='fa fa-file-o'></i>&nbsp;|&nbsp;CSV", 
         "fnInit": function (nButton, oConfig) { 
          $(nButton).addClass('btn btn-primary'); 
         } 
        }, 
        { 
         "sExtends": "pdf", 
         "sButtonText": "<i class='fa fa-file-pdf-o'></i>&nbsp;|&nbsp;PDF", 
         "fnInit": function (nButton, oConfig) { 
          $(nButton).addClass('btn btn-warning'); 
         } 
        } 
       ]) 
       .withFixedHeader({ 
        bottom: true 
       }) 
       .withDOM('<"clear"><"#top.hidden-print"<".row"<".col-md-6"i><".col-md-6"f>><".row"<".col-md-6"l><".col-md-6"p>><"clear">T>rt') 
       ;    
     } 


     $scope.dtOptions = $scope.buildTable(); 

     $scope.buildColumns = function(){ 
      return [ 
       DTColumnBuilder.newColumn('id').withTitle('ID'), 
       DTColumnBuilder.newColumn('firstName').withTitle('First name'), 
       DTColumnBuilder.newColumn('lastName').withTitle('Last name'), 
       DTColumnBuilder.newColumn('city').withTitle('city'), 
       DTColumnBuilder.newColumn('state').withTitle('state'), 
       DTColumnBuilder.newColumn('zip').withTitle('zip'), 
       DTColumnBuilder.newColumn('country').withTitle('country'), 
       DTColumnBuilder.newColumn('phone').withTitle('phone'), 
       DTColumnBuilder.newColumn('email').withTitle('email') 
      ]; 
     } 

     $scope.dtColumns = $scope.buildColumns(); 


     $scope.reloadData = reloadData; 
     $scope.dtInstance = {}; 

     function reloadData() { 
      var resetPaging = false; 
      $scope.dtInstance.reloadData(callback, resetPaging); 
     } 

     function callback(json) { 
      console.log(json); 
     } 

    } 
]); 

oder dynamisch erstellen die Tabelle (.load jquery kann nützlich sein)