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

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:


   

   

            

                

                    
id
                    
name
                    
address
                
            
   



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( 'A' )             
            },// 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 '' + data.id + '';
                                  }
                       },
                       {"data" : "name"},
                       {"data" : "address"}
                      ]
        }); // dataTable()
 }// companiesList()

By Yosi Lev - Feb 22, 2016