【发布时间】：2018-10-17 02:52:18
【问题描述】：
我已经看到很多关于此的问题，但没有一个答案让我足够接近以解决我的问题。希望对于外面的人来说这是一个简单的。 我正在尝试使用 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。 object - 定义 jQuery.ajax 的属性。 function - 自定义数据获取函数
将数据写入某个文件时是否应该使用“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 文件中的确切位置实际上看起来像什么？这个过程的细节让我无法理解。也许有一些我没有的假设知识。任何帮助表示赞赏。
【问题讨论】：
-
您在 onreadystatechange 函数中的任何行是否填充了数据表？
-
@manjack 用
myData分配dataTable 属性数据不起作用？我们可能需要在数据表初始化后添加数据/行。 -
@manjack 我在您的数据表初始化中注意到 myData 是一个字符串；
"data": "myData"描述拼写错误或您的代码中是否存在拼写错误？ -
@Flemmin 简短的回答是否定的。我尝试了 2 种不同的解决方案。我用 onreadystatechange 中定义的“editedJsonText”替换了“myData”。它为第一个数组元素“日期”列返回“请求的未知参数”错误。请参阅此处：datatables.net/manual/tech-notes/4 我还尝试将 DataTable 代码移动到 onreadystatechange 函数中。在上面的代码中，您将看到一个名为 displaySearchResults 的函数，它包含构建表的所有代码。我只是把它全部移到了 onreadystatechange 中。它返回了同样的错误。这能回答你的问题吗？
-
是的，确实如此。谢谢。
标签： javascript jquery ajax datatables