Datatable jquery + ajax + php tablosundaki verileri alınamıyor (Sunucu tarafı işleme)

Question

Ben bu örnek datatable aşağıdaki kullanıyorum https://datatables.net/examples/data_sources/server_side.html

Yani benim tablodur:

<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> 

Benim 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", 
    }); 

Benim ajax döndürdü:

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

Sorunum, "Tabloda veri yok" ifadesini her zaman alabilmem. Fakat gördüğünüz gibi ajax'ın bazı sonuçları vardır (bu örnekte 1). Kodum resmi örnekte olduğu gibi görünüyor.

Verilerin tablolarda neden gösterilmediğini anlayamıyorum (ve tarayıcı konsolunda hata alıyorum).

Answer 1

Bazı dinamik yükleme veya herhangi bir yönlendirme kullanıyor musunuz? Örneğin angularjs ngroute veya bazı çerçeve.

Bu durumda işe yaramıyor (yaptığınız gibi değil). Sen 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); 
     } 

    } 
]); 

ya da sadece dinamik tablo oluşturmak bu gibi bazı this gibi rehber veya örneği takip edebilirsiniz

(.Load jquery faydalı olabilir)