Javascript DataTables不显示数据_Javascript_Ajax_Json_Datatables

Javascript DataTables不显示数据

javascript ajax json datatables

Javascript DataTables不显示数据,javascript,ajax,json,datatables,Javascript,Ajax,Json,Datatables,我正在尝试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="se

我正在尝试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>

它很好用。

变量是我使用firefox->developer->network->xhr->response对话框从服务中获取的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 + "}";
        }
    }
}

namespace JsonTest
{
/// 
///WebService 1的摘要说明
/// 
[WebService（命名空间=”http://tempuri.org/")]
[WebServiceBinding（ConformsTo=WsiProfiles.BasicProfile1_1）]
[System.ComponentModel.ToolboxItem（false）]
//要允许使用ASP.NET AJAX从脚本调用此Web服务，请取消注释以下行。
[System.Web.Script.Services.ScriptService]
公共类WebService 1:System.Web.Services.WebService
{
[网络方法]
公共字符串GetData（）
{
var list=ActivityHistory.GetAll（）；//list
var s=Newtonsoft.Json.JsonConvert.SerializeObject（列表）；
返回s；
//返回“{\“aaData\”：“+s+”}”；
}
}
}

编辑2015年7月21日： 我在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>


数据表测试
$（文档）.ready（函数（）{
$.ajax({
类型：“post”，
url:“WebService1.asmx/getdata”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（数据）{
var myData=$.parseJSON（data.d）；
$（'#示例'）。数据表({
“数据”：myData，
“栏目”：[
{“数据”：“Id”}，
{“数据”：“活动ID”}，
{“数据”：“操作类型”}，
{“数据”：“用户ID”}，
{“数据”：“评论”}，
{“数据”：“ActionDate”}
]
});
}
});
});
活动历史ID
啊_ActivityID
AHU操作类型
AH_用户ID
阿胡评论
时间戳

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

这是第三天的尝试，但我仍然无法理解

编辑2015年7月22日
这就是有效的代码。远非例子

<%@ 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>

数据表测试 $（文档）.ready（函数（）{ $（“#示例”）.hide（）； $.ajax({ 类型：“POST”， url:“WebService1.asmx/GetData”， contentType:“应用程序/json；字符集=utf-8”，数据类型：“json”，成功：功能（数据）{ $（“#示例”）.show（）； var myData=$.parseJSON（data.d）； $（'#示例'）。数据表({ “数据”：myData， “栏目”：[ {“数据”：“Id”}， {“数据”：“活动ID”}， {“数据”：“操作类型”}， {“数据”：“用户ID”}， {“数据”：“评论”}， {“数据”：“ActionDate”} ] }); } }); }); 活动历史ID 啊_ActivityID AHU操作类型 AH_用户ID 阿胡评论时间戳
修改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数组
e、 g
注意：aaData需要设置，否则您的数据将不会被绑定。
根据选项
contentType:'application/json；调用ASP.NET AJAX web方法确实需要charset=UTF-8'
和
类型：'POST'
但是，为了发送JSON编码的参数而不是URL编码的参数，您需要使用选项将参数编码为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" } ] });

函数被声明为datatable，但在调用中我看到$（'#example'）.datatable（），可能区分大小写？我想d应该是json对象，像这样想{'d'：[…]}不。不是它，但谢谢。@sakir:你是什么意思？如果我不使用该服务并使用var d，它可以正常工作。“processing”：true，“serverSide”：true，以他的例子为例。数据类型似乎不需要设置jsonaobject
aaData
，因为初始化选项中使用了
“dataSrc”：“
。另外，由于使用了客户端处理模式，因此不需要
iTotalRecords
和
iTotalDisplayRecords
。如果删除contentType行，则会出现错误：“DataTables警告：table id=example-无效的JSON响应。有关此错误的更多信息，请参阅“@shadow，您可以检查响应吗？”（firefox->developer->network->response）当您收到该消息并将其发布在下面的评论中时。此答案中的代码不起作用。我没有收到任何响应。我参考上次编辑的代码。如果删除contentType行，则响应为“@shadow，我已经更新了我的答案，结果证明你的思路是正确的。@Gyrocode:谢谢你，朋友。我将尝试我找到的一个或两个其他控件，因为老实说，我对datatables有点失望。我花了近3天的时间进行了大量搜索，才在一个示例中显示数据。
Gson gson = new GsonBuilder().setPrettyPrinting().create(); String json = gson.toJson(dataTableObject); out.print(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" } ] });