DataTables不顯示數據

我試圖控制jQuery DataTables。問題是我無法顯示數據。DataTables不顯示數據

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-> 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 + "}"; 
     } 
    } 
}

編輯21/07/2015： 我做的HTML代碼中的一些變化，它的工作有一個小錯誤。加載時，我在頁面頂部看到表格元素的頭部（ActivityHistoryID，AH_ActivityID，AH_OperationType，AH_UserID，AH_Comments，AH_TimeStamp）。之後，它工作正常（對於60.000行!!!）。

新的改變的代碼是：

<%@ 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這是在數據表網站的例子，闡釋M。

這是第三天嘗試，但我仍然無法弄清楚。

編輯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>

來源

2015-07-20 shadow

函數聲明爲數據表，但在呼叫我看到$（「＃示例」）。數據表（）情況而定敏感？ – lloydom

我想d應該是json對象這樣的想法{'d'：[.....]} – sakir

不是，而是謝謝。 – shadow

-1

修改你的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到CONVER你的對象的列表，以JSON數組
例如，

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

注： aaData需要進行其他設置你的數據不會被綁定。

來源

2015-07-20 12:45:00 Waqar

我試過了。！沒什麼.... :(但由於任何方式 – shadow

請出示您的服務器端代碼 – Waqar

剛添加的服務代碼 – shadow

-1

根據this post選項contentType: 'application/json; charset=UTF-8'和type: 'POST'確實需要調用ASP.NET AJAX Web方法。

然而，爲了發送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" } 
    ] 
});

來源

2015-07-20 14:43:58

如果我刪除的contentType線，我得到錯誤：「數據表警告：。表ID =例子 - 無效JSON迴應有關它的更多信息錯誤，請參閱http://datatables.net/tn/1「 – shadow

@shadow，你可以檢查迴應（firefox-> developer-> network-> response），當你收到這條消息並將它發佈在下面的評論中 –

這個答案中的代碼不起作用，我沒有得到任何迴應，我引用了最後編輯的代碼，如果我刪除了contentType行，那麼響應是「<？xml version =」1.0「encoding =」utf-8「？ > [{「Id」：3，「ActivityID」：91，「OperationType」：0，「UserID」：4183，「Comments」：「」， ActionDate「：」2006-03-19T12：26：01.673「}]」 – shadow

DataTables不顯示數據

回答

相關問題