爲什麼我從數據庫中填充的數據不顯示在Datatables中？

Question

我試圖顯示數據，我用json和ajax填充到DataTables，但數據不顯示，但是當我檢查我得到json數據，但它不顯示在數據表中。

這是我的腳本從其他文件調用JSON

的index.php

<script type="text/javascript"> 
      $(document).ready(function() { 


       var oTable = $('#tabelSpta').dataTable({ 

        "deferRender": false, 
        "footerCallback": function (tfoot, data, start, end, display) { 
        var api = this.api(); 
        var intVal = function (i) { 
         return typeof i === 'string' ? 
          i.replace(/[\$,]/g, '')*1 : 
          typeof i === 'number' ? 
           i : 0; 
        }; 
        var p = api.column(10).data().reduce(function (c, d) { //Mengatur penjumlahan total akhir di kolom ke-4 (Kolom Total) 
         return parseFloat(c) + parseFloat(d); 
        }, 0) 
        $(api.column(10).footer()).html(p); //Mengatur letak hasil total dari var p (Diletakan di footer kolem ke-4) nb:Kolom mulai dar index ke-0 
        // $("#total").val(p); 
       }, 

        "ajax" : { 
        "url": 'database.php', 
         "dataType": 'json', 
         "data" : { 'name' : 'OkeJekAJAX'}, 
         "type" : 'POST', 
         success: function(s){ 
         console.log(s); 
         console.log("CEK DATA"); 
          oTable.fnClearTable(); 
          for(var i = 0; i < s.length; i++) { 
           oTable.fnAddData([ 
            s[i][0], //NoSPTA 
            // s[i][1], //TglBerlaku 
            s[i][2], //NoRegisterInduk 
            s[i][3], //NamaPetani 
            s[i][4], //TglGawang 
            s[i][5], //TglBruto 
            s[i][6], //TglGiling 
            s[i][7], //TglTarra 
            parseFloat(s[i][8]).toFixed(0), //Netto 
            s[i][9], //Rafraksi 
            parseFloat(s[i][10]).toFixed(0), //Potongan 
            parseFloat(s[i][11]).toFixed(0), //Netto 

           ]);      
          } // End For 

         }, 
         error: function(e){ 
         console.log(e.responseText); 
         } 
        } 
       }); 
      }); 
     </script> 

這是我爲database.php

<?php 

    $serverName="192.168.1.250"; 
    $conn = new PDO("sqlsrv:server=$serverName; Database=tebu", "sa", "sukseskan"); 

    $userAnswer = $_POST['name']; 
    var_dump($userAnswer); 


    $query = "SELECT 
        a.spa AS NoSPTA, 
        a.tglberlaku as TglBerlakuSPTA, 
        a.Kdptn, a.namaptn, 
        b.tgl AS TglGawang, 
        c.tgl AS TglBruto, 
        c.tglgil AS TglGiling, 
        c.tgltarra AS TglTara, 
       case when tgltarra is not null then 
       ISNULL(c.bruto, 0) - ISNULL(c.Tara, 0) + 0.001 
       else ISNULL(c.bruto, 0) end 

        AS Netto, 
         isnull(d.RF,'') 
        AS RF, 
         isnull(d.pot,0) * (ISNULL(c.bruto, 0) - ISNULL(c.Tara, 0) + 0.001) 
        AS Potongan, 
         (ISNULL(c.bruto, 0) - ISNULL(c.Tara, 0) + 0.001)-((ISNULL(c.bruto, 0) - ISNULL(c.Tara, 0) + 0.001) * isnull(d.pot,0)) 
        AS NettoAkhir 

       FROM   tblSPA a LEFT OUTER JOIN 
             vtblpos4 d ON a.spa = d.NoSPA LEFT OUTER JOIN 
             tblbruto c ON a.spa = c.nospa LEFT OUTER JOIN 
             tblgawang b ON a.spa = b.nospa 
       where a.tglberlaku>='2017-08-07 00:00:00' and a.tglberlaku<='2017-08-07 23:59:59' 
       and left(kdptn,5)='IA045' 
       order by a.spa desc"; 

      $stmt = $conn->prepare($query); 
      $stmt->execute(); 
      $hasil = $stmt->fetchAll(); 
      echo json_encode($hasil); 

?> 

這是我檢查我的JSON數據from browser

string（10）「OkeJekAJAX」 [{「NoSPTA」：「0963 42「，」0「：」096342「，」TglBerlakuSPTA「：」2017-08-0723：59：59.000「，」1「：」2017-08-0723：59：59.000「，」Kdptn「 IA045ZN0HG0「，」2「：」IA045ZN0HG0「，」namaptn「：」MUNIP KHUSAINI「，」3「：」MUNIP KHUSAINI「，」TglGawang「：」2017-08-07 14：55：33.000「，」4「 「2017-08-0714：55：33.000」，「TglBruto」：null，「5」：null，「TglGiling」：null，「6」：null，「TglTara」：null，「7」內託 「：」 0.0" ， 「8」： 「0.0」， 「RF」： 「」， 「9」： 「」， 「Potongan」： 「0.0」， 「10」： 「0.0」， 「NettoAkhir」：」 0.001「，」11「：」0.001「}]

如何顯示我的數據？

Answer 1

除了var_dump你使用dataTables ajax錯誤的方式。 success()實際上會阻止整個內置執行，您應該定義columns而不是嘗試手動插入行。更改ajax文字到：

ajax: { 
    url: 'database.php', 
    data: { 
     name: 'OkeJekAJAX' 
    }, 
    dataSrc: '' 
} 

dataSrc告訴它將接收項目的數組數據表。其他任何東西都不需要，是多餘的或破壞性的。然後添加一個columns部分：

columns: [ 
    { data: 'NoSPTA', title: 'NoSPTA' }, 
    { data: 'Kdptn', title: 'Kdptn' }, 
    //...etc 
] 

演示 - >http://jsfiddle.net/0f9Ljfjr/954/