jQuery的數據表：通行證返回JSON給一個變量

Datatables（提供分頁）
Defiant.js（提供JSON的搜索功能）

這裏是我的問題和代碼...

$(document).ready(function() { 
    var myjson; 

//Initialize Datatable 
    var newtable = $('#pdf-results').DataTable({ 
     "ajax": { 
      "url": "http://www.example.com/home/Dummy_JSON_data.js", 
      "dataSrc": function(json) { 
      myjson: json; // This is the problem. I am not sure how to assign returned JSON to a variable ? 
      } 
     } 
    }); 

// On button click, pass the returned JSON results to Defiant code below for searching and redraw Datatable. 

    $("button").click(function() { 
     var cname = $("#name").val(); 
     console.log('cname', cname); 
     var cyear = $("#year").val(); 

     var rawXPath_cName = '//*[(contains(courseName, "' + cname + '") or contains(courseCode, "' + cname + '")) and contains(Year, "' + cyear + '")]'; 
     //console.log(rawXPath_cName); 
     try { 
      var reds = JSON.search(myjson, rawXPath_cName); 
      var table_body = ''; 
      for (var i = 0; i < reds.length; i++) { 
       table_body += '<tr>'; 
       table_body += '<td>' + reds[i].courseCode + '</td>'; 
       table_body += '<td>' + reds[i].courseName + '</td>'; 
       table_body += '<td>' + reds[i].Year + '</td>'; 
       table_body += '<td>' + reds[i].Trimester + '</td>'; 
       table_body += '<td><a href = ' + reds[i].pdfURL + '>Download map</a></td>'; 
       table_body += '</tr>'; 
      } 
      $("tbody").empty(); 
      $("tbody").append(table_body); 
      newtable.ajax.reload(); // Also, not sure if this is required or not. 
      //When the table redraws based on user search query, datatables doesn't display pagination correctly. It sometimes it shows 4-5 rows on page 1 and 4-5 rows on page 2, instead of showing upto 10 rows on page 1, which is the default behavior. 

     } catch (e) { 
      console.log('No results found'); 
     } 
    }); 
});

我需要將Ajax調用返回的數據分配給一個變量，以便我可以在defiant.js代碼中使用這些結果來搜索結果集。基本上這個代碼myjson：json;上面的失敗。

來源

2017-03-10 Slyper

創建一個公共全局變量，然後當「數據」從ajax回來時，您可以將其傳遞給全局變量，然後對其運行函數，然後輸出。我會稍後發佈一個例子。 – googabeast

我希望我正確地閱讀API，但它看起來像你想使用ajax.json（） - https://datatables.net/reference/api/ajax.json()

var newtable = $('#pdf-results').DataTable({ 
    "ajax": { 
     "url": "http://www.example.com/home/Dummy_JSON_data.js" 
    } 
}); 

//new code 
newtable.on('xhr', function(){ 
    var json = newtable.ajax.json(); 
    myjson = json.data; //bind to global variable 
    alert(json.data); 
});

來源

2017-03-10 02:23:01 googabeast

Thanks @googabeast json.data returns _undefined_另外，我只想使用Datatables，通過AJAX調用返回行。 https://datatables.net/examples/ajax/simple.html但是，情況複雜化的是另一個需要使用JSON數據的插件/庫Defiant.js。 – Slyper

下面的snippit返回什麼？的console.log（$（ '＃PDF-結果'）的數據（「數據表」）。）;在我看來，在所有插件中，API都包含所有返回的結果集以及基本配置。如果您使用FireFox，請嘗試複製（$（'＃pdf-results'）。data（「DataTable」））並將結果粘貼到此處。 – googabeast

在Firefox和Chrome中，此'console.log（$（'＃pdf-results'）。data（「DataTable」））;'返回_undefined_。另外我發現了一些可以幫助https://datatables.net/examples/api/api_in_init.html，但不知道如何在我的情況下實現這一點.... – Slyper

據the docs，它應該簡單地通過聲明一個全局變量工作（在這種情況下myjson），並指定在dataSrc功能JSON數據吧：

var newtable = $('#pdf-results').DataTable({ 
     "ajax": { 
      "url": "http://www.example.com/home/Dummy_JSON_data.js", 
      "dataSrc": function(json) { 
       myjson = json; // '=', not ':' 
       return json; 
      } 
     } 
    });

在你的代碼正在嘗試使用:分配的JSON的變量，而不是=。也許這就是爲什麼它失敗了？

此外，不要忘記返回dataSrc函數中的數據，因此DataTables可以使用它。

來源

2017-03-10 14:41:02 Sebastianb

jQuery的數據表：通行證返回JSON給一個變量

回答

相關問題