How can I create a link using the data source in Datatables Row Grouping?

starfx

I am using Row Grouping advanced initialisation: https://datatables.net/examples/advanced_init/row_grouping.html and I would like to add a link from a database to the grouped column, in the example the link would be Edinburgh, London etc.

Before I was using column.render: https://datatables.net/reference/option/columns.render to add a link and it was working. As you can see in the code I am targeting column 1 (working) and would like to target column 0, the hidden column that is grouped (not working).

Column 0 is hidden and contains the group name. Column 3 is hidden and contains the link.

JS Code below:

$(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('<tbody class="example-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
              $("#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 '<a href=//'+data[ 3 ]+' target="_blank">'+data[ 1 ]+'</a>';
          }}
          ],

          "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(
                  '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                  );

                last = group;
              }
            } );
          }
        } );
        } );

Thank you!

starfx

Hello everyone,

In case someone else encounters this problem here is the solution that someone managed to come up with:

api.rows({page:'current'} ).data().each( function ( data, i ) {
   var group = data[0];
   var groupLink = '<a href="' + data[3] + '">' + $('<div>').text(group).html() + '</a>';

   if ( last !== group ) {
      $(rows).eq( i ).before(
         '<tr class="group"><td colspan="5">'+group+'</td></tr>'
      );

      last = group;
   }
});

And the link: https://stackoverflow.com/questions/32445714/how-can-i-create-a-link-using-the-data-source-in-datatables-row-grouping