堆棧內存溢出
  簡體   English   中英

DataTables不顯示數據

[英]DataTables does not display data

 原文  2015-07-20 12:38:29  3   2    javascript/ ajax/ json/ datatables

問題描述

我正在嘗試jQuery 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 + "}";
        }
    }
}

編輯2015年7月21日：我對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代替datatables站點示例中的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 個解決方案

解決方案1
 -1  2015-07-20 12:45:00

修改您的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，否則您的數據將不會被綁定。

解決方案2
 -1  2015-07-20 14:43:58

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

但是，為了發送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" }
  ]
});

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 jQuery DataTables從控制器加載數據但不顯示它 數據表不顯示與表的分頁 數據表不打印ajax數據 Jquery 數據表未填充數據 jQuery數據表不顯示列標題 數據表更新單元格值不顯示 數據表 - 從兩個 arrays 顯示器獲取數據 檢索parse.com數據並顯示在數據表中 jQuery DataTables無法識別已加載的數據 如何獲取數據表中數據的“ id”以在更新表單中顯示數據？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM