2017-03-13 20 views
0

經過長時間的搜索,我無法找到解決此問題的方法,通過Ajax GET加載Datatables已有詳細記錄,但如何在Ajax POST後直接使用JSON響應?如何直接在Ajax成功結果上從JSON對象加載Datatables?

這是我PHP功能:

function getRelated() { 
    var elements = (document.getElementsByClassName('exashare')); 
    var query = []; 
    for(var i=0;typeof(elements[i])!='undefined';query.push(elements[i++].getAttribute('data-id'))); 

    query = query.join(','); 

    $.ajax({ 
     type: "POST", 
     url: baseUrl+"/requests/get_related.php", 
     data: "query="+query+'&_token='+_token, 
     cache: false, 

     success: function(html){ 
      $('#example').DataTable({ 
       "processing": true, 
       "serverSide": true, 
       "ajax": { 
        'url':jQuery.parseJSON(html), 
        "dataSrc": "" 
       }, 
       "columns" : [ 
         { "data": "#" }, 
         { "data": "id" }, 
         { "data": "art" }, 
         { "data": "name" }, 
         { "data": "title" }, 
         { "data": "tag" }, 
         { "data": "likes" }, 
         { "data": "views" }, 
         { "data": "duration" }, 
         { "data": "time" } 
        ] 
      }); 
     } 
    }); 
} 

JSON成功看起來是這樣的:

{ 
    "data": [{ 
     "#": "1", 
     "id": "9", 
     "art": "default\/def8.jpg", 
     "name": "Simon The Cat", 
     "title": "Riflessioni sulla vita", 
     "tag": "riflessioni,vita,", 
     "likes": "1", 
     "views": "1024", 
     "duration": "185", 
     "time": "2015-11-30 19:36:31" 
    }, { 
     "#": "2", 
     "id": "15", 
     "art": "default\/def2.jpg", 
     "name": "Simon The Cat", 
     "title": "Riflessioni sulla morte", 
     "tag": "riflessioni,morte,", 
     "likes": "1", 
     "views": "1003", 
     "duration": "185", 
     "time": "2015-11-14 12:06:21" 
    }, 
    ...] 
} 

我也試過這樣:

//from this: 
$('#example').DataTable({ 
    "processing": true, 
    "serverSide": true, 
    "ajax": { 
     'url':jQuery.parseJSON(html), 
     "dataSrc": "" 
    }, 
    ... 

//to this: 
$('#example').DataTable({ 
    "ajax": jQuery.parseJSON(html), 
    ... 

但在控制檯它總是笑ws我錯誤"lenght of undefined"

我已經嘗試直接從一個JSON文件url 加載數據,其中包含上面的相同響應,它運行良好。

如何在Ajax POST成功結果中加載JSON數據以填充我的表格?

回答

1

最後,多次嘗試之後,我發現,與最新發布Datatables工程解決方案(1.10.13):

function getRelated() { 
    var elements = (document.getElementsByClassName('exashare')); 
    var query = []; 
    for(var i=0;typeof(elements[i])!='undefined';query.push(elements[i++].getAttribute('data-id'))); 

    //parse as string 
    query = query.join(','); 

    $.ajax({ 
     type: "POST", 
     url: baseUrl+"/requests/get_related.php", 
     data: "query="+query+'&_token='+_token, 
     cache: false, 

     success: function(html){ 
      //html is a json_encode array so we need to parse it before using 
      var result = jQuery.parseJSON(html); 
      $('#example_ert').DataTable({ 
       //here is the solution 
       "data": result.data, 
       "ajax": { 
          "url": result, 
          "dataSrc": "" 
         }, 
       "columns" : [ 
         { "data": "#" }, 
         { "data": "id" }, 
         { "data": "art" }, 
         { "data": "name" }, 
         { "data": "title" }, 
         { "data": "tag" }, 
         { "data": "likes" }, 
         { "data": "views" }, 
         { "data": "duration" }, 
         { "data": "time" } 
        ] 
      }); 
     } 
    }); 
}