DataTables hyperlink on all rows in a column

Question

I am using DataTables to generate a table. There is a column containing order numbers.

For example: ...

I need every row in this column to have a hyperlink to view/order?id=? where ? is the contents of row in the Order No column. For example the first row would be a hyperlink to view/order?id=1321755 etc.

What is the simplest way I can do so?

Here is the code that I am using to initialize the DataTables:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#example').dataTable( {
            "serverSide": true,
            "ajax": {
                    "url": "../server_processing/orders.php",
                    "type": "POST"
                    },
            "order": [[ 0, "desc" ]]
        } );
    } );
</script>

  <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>Order No</th>
        ...
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

Answer 1

I needed to use jQuery dataTables and turn a normal field to be a HREF field.

Here you have it all, including also dataTables error handling..

Enjoy..

Yosi Lev

1) The HTML part:
<!-- COMPANIES LIST start -->
<div id="compListDiv" style="visibility:hidden; position : absolute; left : 360px; top : 40px;">
   <br>
   <table id="compList"  align="left" border="1">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>address</th>
                </tr>
            </thead>
   </table>
</div>
<!-- COMPANIES LIST end -->

2) The javascript dataTables part:
When a button is clicked the following js function is called:
function companiesList(){
        accountstable=$('#compList').dataTable({
            sort : true,
            bFilter: false, 
            bInfo: false,
            paging:false,
            autoWidth: true,
            ajax: {
                url: "http://localhost:8080/j112/rest-1/companies/list",
                dataType: 'json',
                dataSrc: "data",
                error: function ( xhr, textStatus, error ) {
                    if ( textStatus === 'timeout' ) {
                        alert( 'Timout error. The server took too long to send back the data.\nPlease try again.' );
                    }
                    else {
                        alert( 'User Not In Session.' );
                        location.href = "login.html";
                    }
                    myDataTable.fnProcessingIndicator( false );
                }//function
            }/* ajax: */,
            scrollCollapse: true,

            bDestroy: true,
            serverSide:true,
            fnRowCallback : function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) { // this function is called for each row, but I could not use it to add the link
                 // if ( aData[1] == "A" )
                  //var td0 = $('td:eq(0)', nRow)[0];
                  // $('td:eq(0)', nRow).html( 'A');
                  // $('td:eq(0)', nRow).html( '<b>A</b>' )             
            },// fnRowCallback
            initComplete : function(settings, json) { // this function is called after table is populated
                //$("#compListDiv").show();  // this did not work so I used regular js to show the DIV
                var d1 = document.getElementById('compListDiv');
                d1.style.visibility = 'visible';
              }, //initComplete
            "columnDefs": [  
                         { "width": "10%", "targets": 0 },
                         { "width": "20%", "targets": 0 },
                         { "width": "70%", "targets": 0 }
                       ],

            "columns":[
                       //{"data" : "id"},
                       { // render
                        "data": function (data, type, row, meta) {
                                          return '<a href="view/order?' + data.id + '">' + data.id + '</a>';
                                  }
                       },
                       {"data" : "name"},
                       {"data" : "address"}
                      ]
        }); // dataTable()
 }// companiesList()

By Yosi Lev - Feb 22, 2016

Answer 2

Check this out: http://datatables.net/reference/option/columns.render

You can add a column render callback when you specify columns definition.

var columnsDef = [
...
{
    "title": "Order No.",
    "render": function (data, type, row, meta) {
        return '<a href="view/order?' + data + '">' + data + '</a>';
    }
},
...
];

$("#table").dataTable({
    ...
    "columns": columnsDef,
    ...
});

The data in that column will be changed to what the render function return.