title: How can I create a link using the data source in Datatables Row Grouping?
body: <p>I am using Datatables 1.10 plug-in for Jquery with Row Grouping advanced initialisation: <a href="https://datatables.net/examples/advanced_init/row_grouping.html" rel="nofollow">https://datatables.net/examples/advanced_init/row_grouping.html</a> and I would like to add a link from a database to the grouped column, in the example the link would be <strong>Edinburgh</strong>, <strong>London</strong> etc.</p>
  
  <p>Before I was using column.render: <a href="https://datatables.net/reference/option/columns.render" rel="nofollow">https://datatables.net/reference/option/columns.render</a> to add a link and it was working. As you can see in the code I am targeting column 1 <strong>(working)</strong> and would like to target column 0, the hidden column that is grouped <strong>(not working)</strong>.</p>
  
  <p><em>Column 0 is hidden and contains the group name.
  Column 3 is hidden and contains the link.</em> </p>
  
  <p>JS Code below:</p>
  
  <pre><code>$(document).ready(function() {
  var dataTable = $('#example').DataTable({
  "processing": true,
  "serverSide": true,
  "ajax":{
          url :"example.php", // json datasource
          type: "post",  // method  , by default get
              error: function(){  // error handling
                $(".example-error").html("");
                $("#example").append('&lt;tbody class="example-error"&gt;&lt;tr&gt;&lt;th colspan="3"&gt;No data found in the server&lt;/th&gt;&lt;/tr&gt;&lt;/tbody&gt;');
                $("#example_processing").css("display","none");
              }
            },
  
            "columnDefs": [
            { "visible": false, "targets": [ 0, 3] },
            { "width": "50%", "targets": [ 1, 2 ] },
            { "orderable": false, "targets": [ 1, 2 ] },
            { "targets": 1,
            "data": null,
            "render": function ( data ) {
              return '&lt;a href=//'+data[ 3 ]+' target="_blank"&gt;'+data[ 1 ]+'&lt;/a&gt;';
            }}
            ],
  
            "order": [[ 0, 'asc' ]],
            "displayLength": 25,
            "drawCallback": function ( settings ) {
              var api = this.api();
              var rows = api.rows( {page:'current'} ).nodes();
              var last = null;
  
              api.column(0, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                  $(rows).eq( i ).before(
                    '&lt;tr class="group"&gt;&lt;td colspan="5"&gt;'+group+'&lt;/td&gt;&lt;/tr&gt;'
                    );
  
                  last = group;
                }
              } );
            }
          } );
          } );
  </code></pre>
  
  <p>Thank you!  </p>