title: Datatables - Return Column as HTML <td> Element
body: <p>I'm having some difficulty migrating some Client Side Datatables logic to Server Side. </p>
  
  <p>My current issue is that with Datatables, if you want to paginate a large set of data (20,000+ rows) I first need to load all the rows in the Controller and then pass them to the view:</p>
  
  <pre><code>$records = \App\Records::get();
  
  return view("example.datatables")-&gt;with(["records" =&gt; $records]);
  </code></pre>
  
  <p>Following that, this takes about 2 minutes of waiting before everything is loaded and Datatables paginates the records into pages of 500:</p>
  
  <pre><code>$("#table").DataTable({
    paging: true,
    pageLength: 500,
    ...
  });
  </code></pre>
  
  <p>I've changed the Datatables declaration to handle Server Side processing via <code>ajax</code> like so:</p>
  
  <pre><code>$("#table").DataTable({
    processing: true,
    serverSide: true,
    ajax: {
      url: "...",
      type: "GET"
    }, paging: true,
    pageLength: 500,
    ...
  });
  </code></pre>
  
  <p>Getting this to work as I'd like has gone quite well, but the issue is that Datatables is overriding or ignoring what I'm sending back from my <code>ajax</code> request:</p>
  
  <pre><code>$columnData = [];
  foreach($recordsFromDatabase AS $record){
    $columnDataObject = [];
  
    $columnDataObject[0] = '&lt;td class="myClass" data-property="myProperty"&gt;&lt;input type="text" name="customInput[]"/&gt;&lt;/td&gt;'
  
    ...
  
    $columnData[] = $columnDataObject;
  }
  
  return response()-&gt;json([
    "draw" =&gt; (int)$request-&gt;input("draw"),
    "recordsTotal" =&gt; $totalRecords,
    "recordsFiltered" =&gt; $totalFilteredRecords,
    "data" =&gt; $columnData,
    "error" =&gt; null
  ]);
  </code></pre>
  
  <p>Basically, what I'm sending back is a <code>json</code> response containing <code>data</code>, which is an array of columns, which are <code>&lt;td&gt;</code> elements, instead of just a plain value. So <code>&lt;td&gt;Value&lt;/td&gt;</code> vs <code>Value</code>.</p>
  
  <p>Datatables gives the illusion that this is working correctly, but I end up with </p>
  
  <pre><code>&lt;tr role="row" class="even"&gt;
    &lt;td class="sorting_1"&gt;&lt;input type="text" name="customInput[]"/&gt;&lt;/td&gt;
    ...
  &lt;/tr&gt;
  &lt;tr role="row" class="odd"&gt;
    &lt;td class="sorting_1"&gt;&lt;input type="text" name="customInput[]"/&gt;&lt;/td&gt;
    ...
  &lt;/tr&gt;
  </code></pre>
  
  <p>It renders the <code>&lt;input&gt;</code> inside of the <code>&lt;td&gt;</code> correctly, but <code>class="myClass" data-property="myProperty"</code> are missing, which destroys the extended functionality of my table.</p>
  
  <p>Is there some way to tell Datatables that what I'm sending back are valid <code>&lt;td&gt;</code> elements, and all it needs to do is add an <code>odd</code> or <code>even</code> class? (and even then, that's just for styling I think).</p>