Making a hyperlink of each of the rows in data-grid table

Question

I have a script that fills a data-grid table. I want to make a hyperlink of each of the rows that gets displayed.

The hyperlinks should look like <a href"index.php?id=(id of the row)">

How can I do that with my current script.

Here is my script:

<?php
 // initilize all variable
 $params = $columns = $totalRecords = $data = array();
 $params = $_REQUEST;

 //define index of column
 $columns = array( 
  0 => 'id',
  1 => 'name',
 );
 $where = $sqlTot = $sqlRec = "";

 // check search value exist
 if( !empty($params['search']['value']) ) {   
  $where .=" WHERE ";
  $where .=" name LIKE '".$params['search']['value']."%'";
 }

 // getting total number records without any search
 $sql = "SELECT id, name FROM `customers`";
 $sqlTot .= $sql;
 $sqlRec .= $sql;

 //concatenate search sql if value exist
 if(isset($where) && $where != '') {
  $sqlTot .= $where;
  $sqlRec .= $where;
 }

 $sqlRec .=  " ORDER BY ". $columns[$params['order'][0]['column']]."   ".$params['order'][0]['dir']."  LIMIT ".$params['start']." ,".$params['length']." ";
 $queryTot = mysqli_query($conn, $sqlTot) or die("database error:". mysqli_error($conn));
 $totalRecords = mysqli_num_rows($queryTot);
 $queryRecords = mysqli_query($conn, $sqlRec) or die("error to fetch customers data");

 //iterate on results row and create new index array of data
 while( $row = mysqli_fetch_row($queryRecords) ) { 
  $data[] = $row;
 }  

 $json_data = array(
 "draw"            => intval( $params['draw'] ),   
 "recordsTotal"    => intval( $totalRecords ),  
 "recordsFiltered" => intval($totalRecords),
 "data"            => $data   // total data array
 );

 echo json_encode($json_data);  // send data as json format
?>

Edit 1:

Here I am displaying the data:

<table id="employee_grid" class="display" width="100%" cellspacing="0">
 <thead>
  <tr>
   <th>ID</th>
   <th>Name</th>
  </tr>
 </thead>
</table>

<script type="text/javascript">
 $( document ).ready(function() {
  $('#employee_grid').DataTable({
   "bProcessing": true,
   "serverSide": true,
   "ajax":{
    url :"get.php", // json datasource
    type: "post",  // type of method  ,GET/POST/DELETE
    error: function(){
     $("#employee_grid_processing").css("display","none");
    }
   }
  });   
 });
</script>   

Answer 1

I fixed it by changing the JavaScript.

<script type="text/javascript">
 $( document ).ready(function() {
  $('#employee_grid').DataTable({
   "bprocessing": true,
   "serverSide": true,
        "ajax": {
            "url": "post1.php",
            "type": "POST",
            "error": function(){
                $("#employee_grid_processing").css("display","none");
            }
        },
       "columnDefs": [ {
       "targets": 0,
       "render": function ( data, type, full, meta ) {
                return  '<a href="http://www.example.com/'+data+'">Link</a>';
                }
            }
        ]              
  });   
 });
</script>

This code will replace the first column with the text Link and the original result of the first column will be used in the Hyperlink.

Answer 2

I think you have to write a custom mRender to get this link. and add an extra <th>Link</th> on your table header

 $( document ).ready(function() {
  $('#employee_grid').DataTable({
   "bprocessing": true,
   "serverSide": true,
        "ajax": {
            "url": "get.php",
            "type": "POST",
            "error": function(){
                $("#employee_grid_processing").css("display","none");
            }
        },
        "columns": [
            { "data": "id" },
            { "data": "name" },
            { "data": "id", "render": function ( data )  {
                return  '<a href="http://domain.com/'+data+'">Link</a>';
                }
            }
        ]              
  });   
 });

PS please remove my old suggestion from your code.