问题：

DataTables不显示数据

慕光赫

2023-03-14

我正在尝试jQuery数据表控件。问题是我不能显示数据。

HTML是：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataTablesTest.aspx.cs" Inherits="JsonTest.DataTablesTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>DataTables Test</title>
  <script src="Scripts/jquery-1.10.2.min.js"></script>
  <link href="Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />
  <script src="Scripts/DataTables/jquery.dataTables.js"></script>
  <link href="Content/Site.css" rel="stylesheet" />
</head>

<script>
  var d = [
    { "Id": 3, "ActivityID": 91, "OperationType": 0, "UserID": 4183, "Comments": "", "ActionDate": "2006-03-19T12:26:01.673" },
    { "Id": 4, "ActivityID": 91, "OperationType": 4, "UserID": 4183, "Comments": "", "ActionDate": "2006-03-19T12:26:01.673" },
    { "Id": 5, "ActivityID": 92, "OperationType": 0, "UserID": 5688, "Comments": "", "ActionDate": "2006-03-20T12:05:40.563" }
  ];

  $(document).ready(function () {

    $('#example').dataTable({
      "ajax": {
        "url": "WebService1.asmx/GetData",
        "type": "POST",
        "dataSrc": "",
        "contentType": "application/json; charset=utf-8"
      },
      //"data": d,
      "columns": [
          { "data": "Id" },
          { "data": "ActivityID" },
          { "data": "OperationType" },
          { "data": "UserID" },
          { "data": "Comments" },
          { "data": "ActionDate" }
      ]
    });


    var table = $('#example').DataTable();
    alert('There are' + table.data().length + ' row(s) of data in this table');

  });
</script>

<body>
  <form id="form1" runat="server">
    <div>

      <table id="example" class="display">
        <thead>
          <tr>
            <th>ActivityHistoryID</th>
            <th>AH_ActivityID</th>
            <th>AH_OperationType</th>
            <th>AH_UserID</th>
            <th>AH_Comments</th>
            <th>AH_TimeStamp</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </form>
</body>
</html>

如果我注释掉Ajax代码并取消注释

//"data": d,

它很好用。d变量是我使用firefox从服务中获取的JSON数据-

我读了很多帖子，尝试了很多东西，但都没能成功。有什么帮助吗？谢谢

编辑：服务代码：

namespace JsonTest
{
    /// <summary>
    /// Summary description for WebService1
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {
        [WebMethod]
        public string GetData()
        {
            var list = ActivityHistory.GetAll(); // List<ActivityHistory>
            var s = Newtonsoft.Json.JsonConvert.SerializeObject(list);

            return s;
            //return "{\"aaData\":" + s + "}";
        }
    }
}

《编辑》20150721：我对HTML代码做了一些修改，但有一个小错误。加载时，我在页面顶部看到了table元素的标题（ActivityHistoryID、AH_ActivityID、AH_OperationType、AH_UserID、AH_注释、AH_时间戳）。在那之后，它工作得很好（对于60000行！！！）。

新更改的代码为：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataTablesTest.aspx.cs" Inherits="JsonTest.DataTablesTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>DataTables Test</title>
  <script src="Scripts/jquery-1.10.2.min.js"></script>
  <link href="Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />
  <script src="Scripts/DataTables/jquery.dataTables.js"></script>
  <link href="Content/Site.css" rel="stylesheet" />

  <script>

    $(document).ready(function () {

      $.ajax({
        type: "post",
        url: "WebService1.asmx/getdata",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
          var myData = $.parseJSON(data.d);

          $('#example').DataTable({
            "data": myData,
            "columns": [
                { "data": "Id" },
                { "data": "ActivityID" },
                { "data": "OperationType" },
                { "data": "UserID" },
                { "data": "Comments" },
                { "data": "ActionDate" }
            ]
          });
        }
      });

    });
</script>
</head>

<body>
  <form id="form1" runat="server">
    <div>
      <table id="example" class="display">
        <thead>
          <tr>
            <th>ActivityHistoryID</th>
            <th>AH_ActivityID</th>
            <th>AH_OperationType</th>
            <th>AH_UserID</th>
            <th>AH_Comments</th>
            <th>AH_TimeStamp</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </form>
</body>
</html>

我最后的希望是，我使用的是JQuery 1.10.2，而不是数据站点示例中的1.11.1。

已经试了第三天了，我还是想不明白。

编辑22/7/2015

这就是有效的代码。远非例子。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataTablesTestWorking.aspx.cs" Inherits="JsonTest.DataTablesTestWorking" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>DataTables Test</title>
  <script src="Scripts/jquery-1.11.3.min.js"></script>
  <link href="Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />
  <script src="Scripts/DataTables/jquery.dataTables.js"></script>
  <link href="Content/Site.css" rel="stylesheet" />

  <script>


    $(document).ready(function () {
      $('#example').hide();

      $.ajax({
        type: "POST",
        url: "WebService1.asmx/GetData",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
          $('#example').show();

          var myData = $.parseJSON(data.d);

          $('#example').DataTable({
            "data": myData,
            "columns": [
                { "data": "Id" },
                { "data": "ActivityID" },
                { "data": "OperationType" },
                { "data": "UserID" },
                { "data": "Comments" },
                { "data": "ActionDate" }
            ]
          });
        }
      });


    });
  </script>
</head>

<body>
  <form id="form1" runat="server">
    <div>
      <table id="example" class="display">
        <thead>
          <tr>
            <th>ActivityHistoryID</th>
            <th>AH_ActivityID</th>
            <th>AH_OperationType</th>
            <th>AH_UserID</th>
            <th>AH_Comments</th>
            <th>AH_TimeStamp</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </form>
</body>
</html>

共有2个答案

祁通

2023-03-14

根据这个post选项contentType:'application/json；调用ASP确实需要charset=UTF-8'和类型：“POST'。netajaxweb方法。

但是，为了发送JSON编码的参数而不是URL编码的参数，您需要使用ajax.data选项将参数编码成JSON格式的字符串。

$('#example').dataTable({
  "ajax": {
    "url": "WebService1.asmx/GetData",
    "type": "POST",
    "contentType": "application/json; charset=utf-8",
    "dataType": "json",
    "data": function ( d ) {
       return JSON.stringify( d );
    },
    "dataSrc": "d",
  },
  "columns": [
      { "data": "Id" },
      { "data": "ActivityID" },
      { "data": "OperationType" },
      { "data": "UserID" },
      { "data": "Comments" },
      { "data": "ActionDate" }
  ]
});

柴磊

2023-03-14

修改ajax调用-使其异步

"ajax": {
        "url": "WebService1.asmx/GetData",
        "type": "POST",
        "async" : false,
        "contentType": "application/json; charset=utf-8"
      }

现在，只有在您的服务完成ajax请求后，您的数据才会被绑定。它对我有用。

在服务器端代码中，使用printwriter将json数据作为字符串发送。

PrintWriter out = resp.getWriter(); 
result.put("iTotalRecords", total); 
result.put("iTotalDisplayRecords", totalRecordCount); 
result.put("aaData", array); 
resp.setContentType("text/jsonp"); 
out.print(result);

或者使用gson将对象列表转换为json数组
，例如，

 Gson gson = new GsonBuilder().setPrettyPrinting().create();
  String json = gson.toJson(dataTableObject);
  out.print(json);

注意：需要设置aaData，否则您的数据将不会被绑定。

类似资料：

TableView不显示数据

问题内容：我正在尝试填写从GET请求中收到的一些数据。我不知道为什么，但是如果在我的中，我返回一个特定的值（例如8），它表示信息。如果y返回请求填充的数组的值，则不添加任何行：知道为什么会这样吗？非常感谢你！！更新！我解决了这个问题，在loadUserData（）函数内的complete（）之后添加了self.tableView.reloadData（）。希望能帮助到你！问题答案：快速
firebase的实时数据库不显示数据（显示为空）

应用程序运行良好...只是数据没有出现...我已经添加了sha用户电子邮件显示在登录后，在登录活动中我已经添加了但是在实时数据库数据不显示以防万一…我也等了半个小时，尝试了所有的东西…网络也不错。数据库中的数据库规则的数据库图片 mainActivity.java//不能用于单个子级，即firebaseDatabase.getInstance（）.getReference（）.child（“aj
JSON数据不显示，而是显示空白屏幕

试图制作一个简单的应用程序，从服务器获取JSON数据，并在自定义列表中显示它们，非常简单的事情。但当我运行应用程序时，它显示的是白色空白屏幕，但没有数据。它也没有显示任何错误，我假设如果有任何错误，它不会在我的手机中运行。但不显示获取的数据。下面是类我发现的其他问题与我的问题不匹配，否则不会添加这个问题。
dataTable不显示任何数据

我试图用自己的数据创建一个dataTable：代码如下：但当我运行它时，我看到一张空桌子。我想查看我的数据，我怎么能？
JR报告不显示数据

我编写这段代码是为了使用iReport 4.7.1显示一个简单的报告。以下是我的库： commons-beanutils-1.8.0.jar commons-collections-2.1.1.jar commons-digester-2.1.jar commons-logging-1.1.1.jar jasperrreports-4.7.1.jar jasperreports-applet-4
Wireshark不显示UDP数据包

我检查了Wireshark中未显示的UDP数据包和Wireshark未捕获的UDP数据包，但UDP应用程序捕获了该数据包，但无法解决我的问题。我正在使用Wireshark观察我连接到某个网络设备的适配器上的通信量-除了我发出的通信量之外，没有其他通信量。然后我正在使用Packet Sender应用程序将UDP数据包发送到我知道在适配器另一端的IP地址（即我是10.10.10.34，另一个设备是

DataTables不显示数据

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档