title: How to format/customize data in table columns using datatables server processing?
body: <p>The problem is pretty straight forward. When using the basic initialization of <code>datatables</code> server processing only plain text is displayed on the page. Rather, it pulls EXACTLY what is in the database columns into the table columns with no additional HTML formatting. </p>
  
  <p>Example: Here is an img of what <code>HTML</code> and <code>CSS</code> formatted text looks like - <a href="https://i.imgur.com/li2UMI7.png" rel="nofollow noreferrer">http://i.imgur.com/li2UMI7.png</a>. Each column of the table has it's own styling/format. Now when <code>datatables</code> server processing makes a request to the server/database the results are, like I said, exactly as they are in the database. So in order to get this format as shown above I would have to put the HTML inside the database it self. IE: </p>
  
  <pre><code>&lt;span class="label label-danger"&gt;Tag&lt;/span&gt;
  </code></pre>
  
  <p>or </p>
  
  <pre><code>&lt;span class="label bg-color-greenDark"&gt;Category Label&lt;/span&gt;
  </code></pre>
  
  <p>How can I format the results being pulled from the database and into the table columns on the page? I would prefer to put only TAG in the tag column rather than the entire tag HTML that goes with it.</p>
  
  <p>Is there a way to intercept the results before the hit the page, format them, then post to page? </p>
  
  <p>CODE:</p>
  
  <pre><code>$(document).ready(function() {
      $('#example').DataTable( {
          "processing": true,
          "serverSide": true,
          "ajax": "scripts/server_processing.php",
  
            "columnDefs": [ {
              "data": "firstname", //this name should exist in you response JSON
              "render": function ( data, type, full, meta ) {
                return '&lt;span class="label label-danger"&gt;'+data+'&lt;/span&gt;';
              }
            } ]
  
      } );
  } );
  </code></pre>