title: jquery datatables: adding extra column
body: <p><strong>Scenario</strong></p>
  
  <p>I am using <a href="/questions/tagged/datatables" class="post-tag" title="show questions tagged &#39;datatables&#39;" rel="tag">datatables</a> (@version 1.9.4) for the first time to display data to the user.
  I succeed in retrieving the data via ajax and in binding them to the datatable.</p>
  
  <p>Now I want to add extra columns to let the user process the records. For semplicity sake, the aim is to add a button with an onclick handler that retrieve the data of the 'clicked' record.</p>
  
  <p>In my plan I would bind the json item corresponding to the 'clicked' record to the onclick handler.</p>
  
  <p>Till now, if I add an additional <code>TH</code> for the action column to the DOM, an error occurs from datatables code:</p>
  
  <pre><code>Requested unknown parameter '5' from data source for row 0
  </code></pre>
  
  <p><strong>Question</strong></p>
  
  <p>How to set custom columns? How to fill their content with HTML?</p>
  
  <hr>
  
  <p>Here is my actual config.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table id="tableCities"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;country&lt;/th&gt;
              &lt;th&gt;zip&lt;/th&gt;
              &lt;th&gt;city&lt;/th&gt;
              &lt;th&gt;district code&lt;/th&gt;
              &lt;th&gt;district description&lt;/th&gt;
              &lt;th&gt;actions&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;&lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$('#tableCities').dataTable({
      "bPaginate": true,
      "bLengthChange": false,
      "bFilter": true,
      "bSort": true,
      "bInfo": false,
      "bAutoWidth": true
      , "bJQueryUI": true
      , "bProcessing": true
      , "bServerSide": true
      , "sAjaxSource": "../biz/GetCitiesByZip.asp?t=" + t
  });
  </code></pre>
  
  <p><strong>Sample Json result</strong></p>
  
  <pre><code>{
      "aaData":
      [
          [
              "IT",
              "10030",
              "VILLAREGGIA",
              "TO",
              "Torino"
          ],
          [
              "IT",
              "10030",
              "VISCHE",
              "TO",
              "Torino"
          ]
      ],
      "iTotalRecords": 2,
      "iTotalDisplayRecords": 2,
      "iDisplayStart": 0,
      "iDisplayLength": 2
  }
  </code></pre>
  
  <p><strong>Edit</strong></p>
  
  <p><a href="https://stackoverflow.com/users/617373/daniel">Daniel</a> is right. The solution is to set up the custom column in the <code>aoColumnDefs</code>, specifying the <code>mData</code> and the <code>mRender</code> properties. In particular <a href="http://datatables.net/usage/columns" rel="noreferrer"><code>mRender</code></a> lets to define custom html and javascript.</p>
  
  <pre><code>/* inside datatable initialization */
  , "aoColumnDefs": [
     {
          "aTargets": [5],
          "mData": null,
          "mRender": function (data, type, full) {
              return '&lt;a href="#" onclick="alert(\''+ full[0] +'\');"&gt;Process&lt;/a&gt;';
          }
      }
   ]
  </code></pre>