John John - 5 months ago 36
Ajax Question

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

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

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.