title: JQuery DataTables Server-Side Processing Not Rendering
body: <p>I am trying to implement DataTables using server-sided processing.</p>
  
  <p>As far as I can tell, what I have is correct.. however when I load the page, all I see is <code>"No matching records found"</code>.</p>
  
  <p>I am using  DataTables 1.10.9.</p>
  
  <p>My table is set up like this:</p>
  
  <pre><code>&lt;table id="resellerListTable" class="table table-hover table-condensed display dataTable no-footer" role="grid"&gt;
      &lt;thead&gt;
      &lt;tr role="row"&gt;
          &lt;th class="sorting_disabled" name="asd"&gt;&lt;/th&gt;
          &lt;th class="sorting_disabled"&gt;Name&lt;/th&gt;
          &lt;th class="sorting_disabled"&gt;Active&lt;/th&gt;
          &lt;th class="sorting_disabled no-sort"&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tfoot&gt;
      &lt;tr role="row"&gt;
          &lt;th class="sorting_disabled" name="asd"&gt;&lt;/th&gt;
          &lt;th class="sorting_disabled"&gt;Name&lt;/th&gt;
          &lt;th class="sorting_disabled"&gt;Active&lt;/th&gt;
          &lt;th class="sorting_disabled no-sort"&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This is the Javascript initialising the DataTable.</p>
  
  <pre><code>$('#resellerListTable').DataTable({
      processing: true,
      serverSide: true,
      ajax: {
          type: 'POST',
          url: self.ajaxRoute,
          data: function (d) {
              // Format DataTables data for the API, and include some required data.
              var returnData = {
                  controller: controller,
                  method: method,
                  data: d,
              };
              window.$.extend(returnData.data, data);
              return JSON.stringify(returnData);
          },
          dataSrc: function (d) {
              // Format API response for DataTables
              var response = d;
              if (typeof d.response != 'undefined') {
                  response = d.response;
              }
              console.log(JSON.stringify(response)); // Output from this is below...
              return response;
          },
          async: true,
          error: function (e) {
              console.log(e);
          },
          drawCallback: function() {
              console.log('table drawn');
          }
      }
  });
  </code></pre>
  
  <p>Here is the output logged from the above <code>console.log()</code></p>
  
  <pre><code>{
      "data": [
          [
              "&lt;img src='' /&gt;",
              "Something 1",
              "not active",
              "&lt;a href='/retailer/edit/1'&gt;Edit&lt;/a&gt;&lt;a href='/retailer/delete/1'&gt;Delete&lt;/a&gt;"
          ],
          [
              "&lt;img src='' /&gt;",
              "Something 2",
              "not active",
              "&lt;a href='/retailer/edit/2'&gt;Edit&lt;/a&gt;&lt;a href='/retailer/delete/2'&gt;Delete&lt;/a&gt;"
          ],
          [
              "&lt;img src='' /&gt;",
              "Something 3",
              "not active",
              "&lt;a href='/retailer/edit/3'&gt;Edit&lt;/a&gt;&lt;a href='/retailer/delete/3'&gt;Delete&lt;/a&gt;"
          ],
          [
              "&lt;img src='' /&gt;",
              "Something 4",
              "not active",
              "&lt;a href='/retailer/edit/4'&gt;Edit&lt;/a&gt;&lt;a href='/retailer/delete/4'&gt;Delete&lt;/a&gt;"
          ],
          [
              "&lt;img src='' /&gt;",
              "Something 5",
              "not active",
              "&lt;a href='/retailer/edit/5'&gt;Edit&lt;/a&gt;&lt;a href='/retailer/delete/5'&gt;Delete&lt;/a&gt;"
          ],
          [
              "&lt;img src='' /&gt;",
              "Something 6",
              "not active",
              "&lt;a href='/retailer/edit/6'&gt;Edit&lt;/a&gt;&lt;a href='/retailer/delete/6'&gt;Delete&lt;/a&gt;"
          ],
          [
              "&lt;img src='' /&gt;",
              "Something 7",
              "not active",
              "&lt;a href='/retailer/edit/7'&gt;Edit&lt;/a&gt;&lt;a href='/retailer/delete/7'&gt;Delete&lt;/a&gt;"
          ],
          [
              "&lt;img src='' /&gt;",
              "Something 8",
              "not active",
              "&lt;a href='/retailer/edit/8'&gt;Edit&lt;/a&gt;&lt;a href='/retailer/delete/8'&gt;Delete&lt;/a&gt;"
          ],
          [
              "&lt;img src='' /&gt;",
              "Something 9",
              "not active",
              "&lt;a href='/retailer/edit/9'&gt;Edit&lt;/a&gt;&lt;a href='/retailer/delete/9'&gt;Delete&lt;/a&gt;"
          ],
          [
              "&lt;img src='' /&gt;",
              "Something 10",
              "not active",
              "&lt;a href='/retailer/edit/10'&gt;Edit&lt;/a&gt;&lt;a href='/retailer/delete/10'&gt;Delete&lt;/a&gt;"
          ]
      ],
      "recordsTotal": "23",
      "recordsFiltered": "23",
      "draw": 1
  }
  </code></pre>
  
  <p>I can also tell that DataTables is trying to draw the results as <code>table drawn</code> is being output in the console after every refresh.</p>
  
  <p>Can anyone point me in the right direction?</p>