具有 JSON Ajax 数据源的数据表

Question

假设使用 Django 1.10 和 Django-Tastypie 0.13.3 构建的 RESTful API 对 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>

我想弄清楚为什么我的 table 无法呈现。不仅渲染失败，而且渲染失败没有报错。

当我查看从 PyCharm 中的 Django 开发服务器发出的请求时，我看到以下内容：

"GET /api/v1/serverwinpatchresults/?draw=1&columns%5B0%5D%5Bdata%5D=server.nodename&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%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%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=downloaded&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%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=&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=date&columns%5B4%5D%5Bname%5D=&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=true&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1471378715102 HTTP/1.1" 200 30115

对我来说，似乎从 Datatable 到我的 API 的 GET 请求正在工作并返回 某些东西。然而，除了搜索栏、条目数选择器和 table headers 之外，没有呈现任何内容。我以为我可以使用 columns 从 API 中提取我想要的数据，以深入了解我需要的确切字段。然而，情况似乎并非如此。

所以这是一个操作错误。看来我是通过 localhost 调用 API，同时将页面加载为 127.0.0.1，所以 cross-origin 开始了。

现在的问题是分页不起作用，过滤也不起作用。我相信 Brian Kates 是正确的，我没有通过 Datatables 使用 API 中的元数据来获取诸如总记录数和过滤记录数之类的东西，但是我无法在文档中找到关于如何实现它的可靠示例。

Answer 1

为了让事情更简单，我会先关闭服务器端。它与 ajax 数据源无关，需要您 return 额外参数。例如，您需要 return 总记录数和筛选记录数。我没有在你的代码中看到这一点。请参阅文档：https://datatables.net/examples/server_side/。因为您省略了这些参数，这可能就是您看不到任何内容的原因。

编辑：查看服务器端处理文档：https://datatables.net/manual/server-side#Sent-parameters。分页通过在发送的参数中发送开始和长度来工作。您显然需要使用该信息来查询您的数据。

服务器端过滤需要设置记录总数和过滤记录。

具有 JSON Ajax 数据源的数据表

Datatables with JSON Ajax datasource

json

django

rest

datatables

tastypie