title: DataTables does not display data
body: <p>I'm trying the jQuery <a href="http://www.datatables.net/" rel="nofollow">DataTables</a> control. The problem is that I cannot display data.</p>
  
  <p>HTML is:</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataTablesTest.aspx.cs" Inherits="JsonTest.DataTablesTest" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
    &lt;title&gt;DataTables Test&lt;/title&gt;
    &lt;script src="Scripts/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
    &lt;link href="Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" /&gt;
    &lt;script src="Scripts/DataTables/jquery.dataTables.js"&gt;&lt;/script&gt;
    &lt;link href="Content/Site.css" rel="stylesheet" /&gt;
  &lt;/head&gt;
  
  &lt;script&gt;
    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');
  
    });
  &lt;/script&gt;
  
  &lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
  
        &lt;table id="example" class="display"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;ActivityHistoryID&lt;/th&gt;
              &lt;th&gt;AH_ActivityID&lt;/th&gt;
              &lt;th&gt;AH_OperationType&lt;/th&gt;
              &lt;th&gt;AH_UserID&lt;/th&gt;
              &lt;th&gt;AH_Comments&lt;/th&gt;
              &lt;th&gt;AH_TimeStamp&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If I comment out the Ajax code and uncomment the</p>
  
  <pre><code>//"data": d,
  </code></pre>
  
  <p>It works fine. The <code>d</code> variable is the JSON data that I get from the service using firefox->developer->network->xhr->response dialog.</p>
  
  <p>I read many posts and I tried many things but I can't make it work.
  Any help?
  Thanks.</p>
  
  <p>EDIT:
  Service Code:</p>
  
  <pre><code>namespace JsonTest
  {
      /// &lt;summary&gt;
      /// Summary description for WebService1
      /// &lt;/summary&gt;
      [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&lt;ActivityHistory&gt;
              var s = Newtonsoft.Json.JsonConvert.SerializeObject(list);
  
              return s;
              //return "{\"aaData\":" + s + "}";
          }
      }
  }
  </code></pre>
  
  <p><strong>EDIT 21/07/2015:</strong>
  I've done some changes in HTML code and it's working with a little bug. While loading I see for a moment at the top of the page the headers of the table element (ActivityHistoryID, AH_ActivityID, AH_OperationType, AH_UserID, AH_Comments, AH_TimeStamp). After that it's working fine (for 60.000 rows!!!). </p>
  
  <p>The new-changed code is:</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataTablesTest.aspx.cs" Inherits="JsonTest.DataTablesTest" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
    &lt;title&gt;DataTables Test&lt;/title&gt;
    &lt;script src="Scripts/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
    &lt;link href="Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" /&gt;
    &lt;script src="Scripts/DataTables/jquery.dataTables.js"&gt;&lt;/script&gt;
    &lt;link href="Content/Site.css" rel="stylesheet" /&gt;
  
    &lt;script&gt;
  
      $(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" }
              ]
            });
          }
        });
  
      });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
        &lt;table id="example" class="display"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;ActivityHistoryID&lt;/th&gt;
              &lt;th&gt;AH_ActivityID&lt;/th&gt;
              &lt;th&gt;AH_OperationType&lt;/th&gt;
              &lt;th&gt;AH_UserID&lt;/th&gt;
              &lt;th&gt;AH_Comments&lt;/th&gt;
              &lt;th&gt;AH_TimeStamp&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My last hope is that I 'm using JQuery 1.10.2 instead of 1.11.1 which is in the examples of datatables site.</p>
  
  <p>It 's the third day of trying and still I cannot figure it out.</p>
  
  <p><strong>EDIT 22/7/2015</strong></p>
  
  <p>That is the code that works. Far from examples.</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataTablesTestWorking.aspx.cs" Inherits="JsonTest.DataTablesTestWorking" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
    &lt;title&gt;DataTables Test&lt;/title&gt;
    &lt;script src="Scripts/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
    &lt;link href="Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" /&gt;
    &lt;script src="Scripts/DataTables/jquery.dataTables.js"&gt;&lt;/script&gt;
    &lt;link href="Content/Site.css" rel="stylesheet" /&gt;
  
    &lt;script&gt;
  
  
      $(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" }
              ]
            });
          }
        });
  
  
      });
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
        &lt;table id="example" class="display"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;ActivityHistoryID&lt;/th&gt;
              &lt;th&gt;AH_ActivityID&lt;/th&gt;
              &lt;th&gt;AH_OperationType&lt;/th&gt;
              &lt;th&gt;AH_UserID&lt;/th&gt;
              &lt;th&gt;AH_Comments&lt;/th&gt;
              &lt;th&gt;AH_TimeStamp&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>