Question

我已经看到很多与此有关的问题，但是没有一个答案使我足够接近以解决我的问题。希望它对那里的某个人来说很简单。我正在尝试使用XHR响应来填充DataTable。单击按钮即可执行对Java servlet的请求。该请求看起来像这样：

function callFileSearchServlet(){
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "http://localhost:8080/FileSearch-1/FileSearch?selectedDataSource=foo&startDate=20180101&endDate=20180102", true );
  xhr.setRequestHeader("Content-type", "application/json");
  xhr.send(null);
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        theResponse = this.responseText;
        editedJsonText = theResponse.substring(8, theResponse.length-1);
        displaySearchResults();
    }
}

为了这篇文章，我对servlet希望接收的URL参数进行了硬编码。 Servlet查看文件系统，并将关于文件的元数据写入JSON。技术上，回复开头应包含以下文字

{"data":

但是我不确定在什么条件下它应该真正存在，因此在修剪之后，响应看起来像这样：

[{"date":"20180101","status":"Incomplete","total_files":66,"total_size":38014958},{"date":"20180102","status":"Complete","total_files":72,"total_size":55471119}]

麻烦的是，我不能只将响应分配给变量并使用它来填充我的DataTable。当我在JavaScript文件中使用静态数据时，这种方法有效。我将静态数据分配给全局JavaScript变量（myData），并将该变量用作DataTable中的数据源。像这样： $(document).ready(function () { var table = $('#search_results').DataTable({ "data": myData, "columns": [ { "className": "details-control", "orderable": "false", "data": "null", "defaultContent": '', "render": function () { return '<i class="fa fa-plus-square" aria-hidden="true"></i>'; }, "width":"15px" }, { "render": function () { return '<input type="checkbox" id="chkbx1" name="flightDirPaths" value="theValue1">'; } }, { "data": "date" }, { "data": "status" }, { "data": "total_files" }, { "data": "total_size" } ], "order": [[1, 'asc']] });

如果我用上面的格式将myData替换为实际数据，则表将正确显示。所以我知道格式很好。因此，现在我有了XHR响应，而且我不知道如何使DataTable使用它。我看了大部分文档和许多论坛，但还没有看到如何做。能做到吗我觉得我必须使用AJAX请求，尽管我已经阅读了所有文档，但我仍然不太了解。更具体地说，https://datatables.net/reference/option/ajax此处的文档规定以下内容：

ajax属性具有三种不同的操作模式，具体取决于其定义方式。这些是：字符串-设置从中加载数据的URL。对象-定义jQuery.ajax的属性。功能-自定义数据获取功能

在将数据写入某个位置的文件时是否应该使用“ URL模式”？与直接从servlet传递数据相比，将数据写到文件以便可以被DataTable吸收似乎是一个额外的步骤。也许我对此很近视，因为我对此没有太多经验。我注意到，Stackoverflow上的绝大多数基于AJAX的解决方案都包括URL模式，但是我的servlet并没有将数据写入文件，也不想这样做。我猜想我需要使用“功能模式”。谁能确认？如果那不是最好的解决方案，那么有人知道我应该怎么做吗？文档指出，功能模式需要三个参数（数据，回调和设置），如下所示：

$('#example').dataTable({"ajax": function (data, callback,settings){callback(JSON.parse( localStorage.getItem('dataTablesData')));}});

我从概念上了解这些参数，但是如何实际创建每个参数没有太多方法。例如，我是否将所有servlet参数（selectedDataSource，startDate，endDate）分配给一个名为“ data”的变量？如果是这样，那么在语法上实际上看起来是什么，以及在JavaScript文件中的确切位置创建它呢？这个过程的细节让我无所适从。也许有些假定的知识我没有。任何帮助表示赞赏。

Answer 1

我想出了一个解决方案。我不必使用功能模式。我只是在DataTable初始化内部使用了AJAX调用，而不是在表初始化外部使用了XHR请求。 AJAX调用中的URL值是我的servlet的URL。因此，我删除了XHR请求，在表初始化中创建了一个AJAX请求，并将其全部移到了按钮单击功能中，因此，当用户单击按钮时，该表将显示从Servlet返回的数据。我在上面发布了新代码。这个网站帮了忙。 https://datatables.net/forums/discussion/45615/how-to-load-table-from-ajax-request

这是我的新代码，可以正常工作。我的旧代码和下面的代码之间的区别是，以“ var table = ...”和““ columns”：...”开头的行之间。

$(document).ready(function () {
    var table = $('#search_results').DataTable({
        "ajax": {
            url: "http://localhost:8080/FileSearch-1/FileSearch?selectedSources=foo&startDate=20180101&endDate=20180102",
            method: "GET",
            xhrFields: {
                withCredentials: true
            }
        },
        "columns": [
            {
            "className": "details-control",
            "orderable": "false",
            "data": "null",
            "defaultContent": '',
            "render": function () {
                return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
            },
            "width":"15px"
            },
            { "render": function () {
                return '<input type="checkbox" id="chkbx1" name="flightDirPaths" value="theValue1">';
                }
            }, 
            { "data": "date" },
            { "data": "status" },
            { "data": "total_files" },
            { "data": "total_size" }
        ],
        "order": [[1, 'asc']]
    });

如何使用XHR响应填充jQuery DataTable

1 个答案: