时间戳

首页 > 解决方案 > JavaScript 数据表不返回数据

javascript - JavaScript 数据表不返回数据

问题描述

我可以在数据表中看到项目，但第一行是表中没有数据？

(document).ready(function() {
  $('#callback_table').DataTable({
    "paging": "input",
    "ajax": {
      "type": "GET",
      "url": '/History/GetCallbackHistory',
      "data": {
        UserId: document.getElementById("callbackuserid").value
      },
      "dataSrc": "",
      "success": function(response) {
        alert("111Done!");
        response.forEach(function(dt) {
          $("#tdata").append("<tr>" +
            "<td>" + dt.Id + "</td>" +
            "<td>" + dt.DateCallback + "</td>" +
            "<td>" + dt.DateEnd + "</td>" +
            "<td>" + dt.Point + "</td>" +
            "<td>" + dt.TaskId + "</td>" +
            "<td>" + typecallback[dt.callbackId] + "</td>" +
            "<td>" + dt.Task_name + "</td>" +
            "<td>" + callbackStatus[dt.callbackStatus] + "</td>" +
            +"</tr>");
        });
      }
    },
  });
  // fillTable(getData());
});

标签： javascripthtmljqueryajaxdatatables

解决方案

一些注意事项：

success(1)使用 DataTables 的选项加载数据时，不应覆盖该ajax选项。DataTables 使用它，在幕后绘制表格。

(2) 您不应该像您正在做的那样通过将数据附加到 DOM 来向 DataTables 添加行。DataTables 对此数据一无所知。

注 (2) 解释了为什么您可以看到您的数据 - 您已将其添加到网页中。

注 (1) 解释了为什么 DataTables 报告“表中没有数据”：尝试加载数据时卡住了。

我希望您也会在浏览器的控制台中看到相关错误（按 F12 访问它）。

因此，您可以改为使用 DataTables 内置的 JSON 数据加载器。success首先从 DataTablesajax选项中删除该部分。这可能是您需要做的所有事情，或者您可能会遇到新问题，具体取决于 JSON 的结构方式和表列的定义方式。

文档中有很多示例。这是一个很好的概述。这里有更详细的例子。

在您的情况下，您提供了"dataSrc": ""选项 - 这意味着 DataTables 期望您的 JSON 响应是一个未命名的数组：[ ...data... ]。

推荐阅读