CODEWITHSUNDEEP
phpjquerydatatables
Jagadeesh
Jagadeesh

Reputation: 2097

Jquery server side processing data table with one extra column as link with row id?

I am doing server side pagination with jquery data table and php as server side.

Below is the image of my server side data table

What I need is I want an extra column header as download with data as a link with respective to its id. for example: <a href="abc.com/id">Download</a> .

Below is my HTML code:

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

My Js:

$('#employee_grid').DataTable({
        "bProcessing": true,
         "serverSide": true,
         "ajax":{
            url :"response.php", // json datasource
            type: "post",  // type of method  ,GET/POST/DELETE
            error: function(){
              $("#employee_grid_processing").css("display","none");
            }
          }
        });   
});

My PHP:

<?php
    //include connection file 
    include_once("connection.php");
     
    // initilize all variable
    $params = $columns = $totalRecords = $data = array();

    $params = $_REQUEST;

    

    //define index of column
    $columns = array( 
        0 =>'id',
        1 =>'employee_name', 
        2 => 'employee_salary',
        3 => 'employee_age'
    );

    $where = $sqlTot = $sqlRec = "";

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

        $where .=" OR employee_age LIKE '".$params['search']['value']."%' )";
    }

    // getting total number records without any search
    $sql = "SELECT * FROM `employee` ";
    $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 employees 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
?>

I have tried using column render and several other things but doesn't able to make out.
Any help?

Upvotes: 0

Views: 1502

Answers (1)

Alex
Alex

Reputation: 419

To achieve this you will need to use columnDefs and column.render options.

https://datatables.net/reference/option/columnDefs

https://datatables.net/examples/advanced_init/column_render.html

You should be able to render your rows by adding this to your DataTable initialisation:

"columnDefs": [
 {

  "render": function ( data, type, row ) {
    let rowID = row[0];
    return `<a href="abc.com/${ rowID }">Download</a>`
   },
   "targets": 4

 }
]

You also need to add new column to html

<table id="employee_grid" class="display" width="100%" cellspacing="0">
 <thead>
  <tr>
   <th>Empid</th>
   <th>Name</th>
   <th>Salary</th>
   <th>Age</th>
   <th>Download</th>
  </tr>
 </thead>
</table>

Upvotes: 1

Related Questions