title: Getting serialised JSON data from Controller to Datatables table
body: <p>I am struggling to get serialised JSON data from my controller to display in a Datatable. I previously was able to display data when I was sending it as a 2D array. Now I would like to be able to use my object and match it with the columns (as seen in the second JavaScript). I attempted to follow <a href="https://stackoverflow.com/questions/9669812/how-can-i-use-a-local-json-object-as-a-data-source-for-jquery-datatables">this solution</a>, but I am unable to see what is wrong after looking at the Datatables docs. </p>
  
  <p><strong>Updated</strong>
  See below what I currently have. I am trying to have the data come through with named parameters as I wish to have parent rows with a list of child items. These items are visible on selection as seen in <a href="http://datatables.net/examples/api/row_details.html" rel="nofollow noreferrer">this DataTables link</a>. Though I am still unable to get the table working with named parameters via JSON data.</p>
  
  <p>Data:</p>
  
  <pre><code>        for (int i = 0; i &lt; 26; i++)
          {
              list.Add(new MembershipTransactionHistoryModel
              {
                  TransactionDate = "01 May 2014",
                  StoreName = "Store Name",
                  CardNumber = "23423566",
                  TransactionType = "Purchase",
                  TransactionValue = "$134.25",
                  PointsEarned = "100",
                  PointsUsed = "23",
                  PointsBalance = "40000"
              });
          }
  
          //return new JavaScriptSerializer().Serialize(list);
          return from l in list
                           select new[] {
                              l.TransactionDate,
                              l.StoreName, 
                              l.CardNumber,
                              l.TransactionType,
                              l.TransactionValue,
                              l.PointsEarned,
                              l.PointsUsed,
                              l.PointsBalance 
                           };
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var grid = $('#transactionHistoryTable').dataTable({
      "bProcessing": true,
      "sAjaxSource": 'MembershipTransactionHistoryData',
      "fnServerParams": function (aoData) {
          aoData.push({ "name": "membershipId", "value": 7 })
      },
      "aoColumnDefs": [
          {
              "sTitle": "",
              "class": 'details-control',
              "orderable": false,
              "mData": null,
              "aTargets": [0],
              "defaultContent": ''
          },
          { "sTitle": "Transaction Date", "mData" : "TransactionDate", "aTargets": [1]},
          { "sTitle": "Store Name", "mData": "StoreName", "aTargets": [2] },
          { "sTitle": "Card Number", "mData": "CardNumber", "aTargets": [3] },
          { "sTitle": "Type", "mData": "Type", "aTargets": [4] },
          { "sTitle": "Value", "mData": "Value", "aTargets": [5] },
          { "sTitle": "Points Earned", "mData": "PointsEarned", "aTargets": [6] },
          { "sTitle": "Points Used", "mData": "PointsUsed", "aTargets": [7] },
          { "sTitle": "Points Balance", "mData": "PointsBalance", "aTargets": [8] }
      ],
      "paginate": true,
      "scrollY": maxHeight,
      "scrollCollapse": false,
      "sort": true
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;table id="transactionHistoryTable" class="display" cellspacing="0"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>Resulting Error:</p>
  
  <pre><code>DataTables warning: table id=transactionHistoryTable - Requested unknown parameter 'TransactionDate' for row 0. For more information about this error, please see http://datatables.net/tn/4
  </code></pre>