數據表與JSON阿賈克斯數據源

Question

給出一個RESTful API使用Django 1.10和Django的Tastypie 0.13.3建立了提供了以下響應GET請求：

{ 
    "meta": { 
     "limit": 20, 
     "next": "/api/v1/serverwinpatchresults/?limit=20&offset=20", 
     "offset": 0, 
     "previous": null, 
     "total_count": 178 
    }, 
    "objects": [ 
     { 
     "date_installed": true, 
     "downloaded": "True", 
     "installed": "True", 
     "patch_guid": { 
      "dateinserted": "2016-08-14T09:34:47", 
      "description": "https://support.microsoft.com/en-us/kb/2757638", 
      "guid": "013af7d6-ec9f-4def-ae41-007d211f9fbc", 
      "kb": 0, 
      "needsreboot": "False", 
      "resource_uri": "/api/v1/winpatches/013af7d6-ec9f-4def-ae41-007d211f9fbc/", 
      "severity": "Moderate", 
      "title": "Security Update for Windows Server 2008 R2 x64 Edition (KB2757638)", 
      "userinput": "False" 
     }, 
     "patch_result_id": "16013af7d6-ec9f-4def-ae41-007d211f9fbc", 
     "resource_uri": "/api/v1/serverwinpatchresults/16013af7d6-ec9f-4def-ae41-007d211f9fbc/", 
     "server": { 
      "active": 1, 
      "cpuarch": null, 
      "customer": { 
       "active": 1, 
       "customer_id": 1, 
       "name": "SOMENAME", 
       "resource_uri": "/api/v1/customers/1/" 
      }, 
      "customer_0": null, 
      "customername": null, 
      "domain": null, 
      "fqdn": null, 
      "host": null, 
      "hwaddr_interfaces": null, 
      "ip4": null, 
      "ip6": null, 
      "kernel": null, 
      "kernelrelease": null, 
      "master": null, 
      "mem_total": null, 
      "nodename": "SOMENODENAME", 
      "num_cpus": null, 
      "num_gpus": null, 
      "os": { 
       "active": 1, 
       "name": "Windows", 
       "os_id": 1, 
       "resource_uri": "/api/v1/operatingsystems/1/" 
      }, 
      "os_0": null, 
      "os_family": null, 
      "osrelease": null, 
      "path": null, 
      "resource_uri": "/api/v1/servers/16/", 
      "saltversion": null, 
      "server_id": 16, 
      "shell": null, 
      "tag_name": "SOMETAGNAME", 
      "timezone": null, 
      "uuid": null, 
      "windows_domain": null, 
      "wintel": null, 
      "zmqversion": null 
     } 
    }, 
    ... 
    ] 
} 

以下HTML：

<table id="patch_report" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>Server</th> 
      <th>Guid</th> 
      <th>Downloaded</th> 
      <th>Installed</th> 
      <th>Date</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

和下面的JavaScript：

<script> 
$(document).ready(function() { 
    $('#patch_report').DataTable({ 
     "serverSide": true, 
     "ajax": { 
      "type" : "GET", 
      "url": "http://localhost:8000/api/v1/serverwinpatchresults/", 
      "dataSrc": "objects" 
     }, 
     "columns": [ 
      { "data": "server.nodename" }, 
      { "data": "patch_guid.guid" }, 
      { "data": "downloaded" }, 
      { "data": "installed" }, 
      { "data": "date_installed" } 
     ] 
    }); 
}); 
</script> 

我想弄清楚爲什麼我的桌子是faili ng呈現。它不但渲染失敗，而且無法正確渲染。

當我看從PyCharm Django的開發服務器我看到下面的被提出的要求：

「GET/API/V1/serverwinpatchresults /畫= 1分&列％5B0％5D％ 5Bdata％5D = server.nodename & columns％5B0％5D％5Bname％5D = & columns％5B0％5D％5Bsearvable％5D = true & columns％5B0％5D％5Borderable％5D = true & columns％5B0％5D％5Bsearch ％5D％5Bvalue％5D = & columns％5B0％5D％5Bsearch％5D％5Bregex％5D = false & columns％5B1％5D％5Bdata％5D = patch_guid.guid & columns％5B1％5D％5B name％5D = &列％5B1％5D％5B可採集％5D =真&列％5B1％5D％5B可訂正％5D =真&列％5B1％5D％5B搜索％5D％5B值％5D = &列％5B1％5D％5B搜索％5D％ 5Bregex％5D =假&列％5B2％5D％5Bdata％5D =下載&列％5B2％5D％5Bname％5D = &列％5B2％5D％5Bsearchable％5D =真&列％5B2％5D％5Borderable％5D = true & column％5B2％5D％5Bsearch％5D％5Bvalue％5D = & columns％5B2％5D％5Bsearch％5D％5Bregex％5D = false & columns％5B3％5D％5Bdata％5D = installed & columns％5B3％ 5D％5Bname％5D = & column％5B3％5D％5Bsearvable％5D = true & columns％5B3％5D％5Borderable％5D = true & columns％5 B3％5D％5Bsearch％5D％5Bvalue％5D = & columns％5B3％5D％5Bsearch％5D％5Bregex％5D = false & columns％5B4％5D％5Bdata％5D = date & columns％5B4％5D％5Bname％5D = & column％5B4％5D％5B可捕獲％5D = true &列％5B4％5D％5B可訂正％5D = true &列％5B4％5D％5Bsearch％5D％5Bvalue％5D = &列％5B4％5D％5B搜索％5D ％5Bregex％5D =假&順序％5B0％5D％5Bcolumn％5D = 0 &順序％5B0％5D％5Bdir％5D = ASC &開始= 0 &長度= 10 &搜索％5Bvalue％5D = &搜索％5Bregex％ 5D = false & _ = 1471378715102 HTTP/1.1「200 30115

對我來說，這似乎是從我的API的Datatables的GET請求正在工作，並返回東西。但是除了搜索欄，條目數量選擇器和表頭以外，不會顯示任何內容。我想我可以使用columns來抽取我想要的API中的數據來深入瞭解我需要的確切字段。然而，這似乎並非如此。

---

所以這是一個操作員錯誤。看起來我是通過localhost調用API，同時加載頁面爲127.0.0.1，所以跨源插入。

現在的問題是分頁不起作用，以及過濾。我相信Brian Kates是正確的，並且我無法通過Datatables從API中獲取元數據，例如總記錄數和過濾記錄數，但是我無法在文檔中找到有關如何實現的可靠示例這個。

Answer 1

爲了使事情更簡單，我將開始關閉服務器端。它與ajax數據源無關，並要求您返回額外的參數。例如，您需要返回總記錄數和過濾記錄數。我沒有看到你的代碼。請參閱文檔：https://datatables.net/examples/server_side/。因爲你忽略了這些參數，這可能是你沒有看到任何東西的原因。

編輯：看看服務器端處理文檔：https://datatables.net/manual/server-side#Sent-parameters。通過在發送的參數中發送開始和長度來進行尋呼。您顯然需要使用該信息來查詢您的數據。

至於服務器端過濾，您需要設置記錄總數和過濾記錄。