Adding hyperlink to each row

mushfik · July 2015

I want to add link to the first column but don't know how to. Please help.

Here's the code of index:

$(document).ready(function() { var dataTable = $('#employee-grid').DataTable( { "processing": true, "serverSide": true, "ajax":{ url :"employee-grid-data.php", // json datasource type: "post", // method , by default get error: function(){ // error handling $(".employee-grid-error").html(""); $("#employee-grid").append('No data found in the server'); $("#employee-grid_processing").css("display","none"); } } } ); $("#employee-grid_filter").css("display","none"); // hiding global search box $('.search-input-text').on( 'keyup click', function () { // for text boxes var i =$(this).attr('data-column'); // getting column index var v =$(this).val(); // getting search input value dataTable.columns(i).search(v).draw(); } ); $('.search-input-select').on( 'change', function () { // for select box var i =$(this).attr('data-column'); var v =$(this).val(); dataTable.columns(i).search(v).draw(); } ); } );

    <style>
        div.container {
            margin: 0 auto;
            max-width:760px;
        }
        div.header {
            margin: 100px auto;
            line-height:30px;
            max-width:760px;
        }
        body {
            background: #f7f7f7;
            color: #333;
            font: 90%/1.45em "Helvetica Neue",HelveticaNeue,Verdana,Arial,Helvetica,sans-serif;
        }
    </style>
</head>
<body>
    <div class="header"><h1>DataTable (Server side) Custom Column Search </h1></div>
    <div class="container">
        <table id="employee-grid"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
                <thead>
                    <tr>
                        <th>Employee name</th>
                        <th>Salary</th>
                        <th>Age</th>
                    </tr>
                </thead>
                <thead>
                    <tr>
                        <td><input type="text" data-column="0"  class="search-input-text"></td>
                        <th><input type="text" data-column="1"  class="search-input-text"></td>
                        <td>
                            <select data-column="2"  class="search-input-select">
                                <option value="">(Select a range)</option>
                                <option value="19-30">19 - 30</option>
                                <option value="31-66">31 - 66</option>
                            </select>
                        </td>
                    </tr>
                </thead>
        </table>
    </div>
</body>

</html>

Here's the data php:

```<?php
/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "Password1";
$dbname = "test";

$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());

/* Database connection end */

// storing request (ie, get/post) global array to a variable
$requestData= $_REQUEST;

$columns = array(
// datatable column index => database column name
0 =>'employee_name',
1 => 'employee_salary',
2=> 'employee_age'
);

// getting total number records without any search
$sql = "SELECT employee_name, employee_salary, employee_age ";
$sql.=" FROM employee";
$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees");
$totalData = mysqli_num_rows($query);
$totalFiltered = $totalData; // when there is no search parameter then total number rows = total number filtered rows.

$sql = "SELECT employee_name, employee_salary, employee_age ";
$sql.=" FROM employee WHERE 1 = 1";

// getting records as per search parameters
if( !empty($requestData['columns'][0]['search']['value']) ){ //name
$sql.=" AND employee_name LIKE '".$requestData['columns'][0]['search']['value']."%' ";
}
if( !empty($requestData['columns'][1]['search']['value']) ){ //salary
$sql.=" AND employee_salary LIKE '".$requestData['columns'][1]['search']['value']."%' ";
}
if( !empty($requestData['columns'][2]['search']['value']) ){ //age
$rangeArray = explode("-",$requestData['columns'][2]['search']['value']);
$minRange = $rangeArray[0];
$maxRange = $rangeArray[1];
$sql.=" AND ( employee_age >= '".$minRange."' AND employee_age <= '".$maxRange."' ) ";
}
$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees");
$totalFiltered = mysqli_num_rows($query); // when there is a search parameter then we have to modify total number filtered rows as per search result.

$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; // adding length

$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees");

$data = array();
while( $row=mysqli_fetch_array($query) ) { // preparing an array
$nestedData=array();

$nestedData[] = $row["employee_name"];
$nestedData[] = $row["employee_salary"];
$nestedData[] = $row["employee_age"];

$data[] = $nestedData;

}

$json_data = array(
"draw" => intval( $requestData['draw'] ), // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw.
"recordsTotal" => intval( $totalData ), // total number of records
"recordsFiltered" => intval( $totalFiltered ), // total number of records after searching, if there is no searching then totalFiltered = totalData
"data" => $data // total data array
);

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

<?php > ``` ?>

tangerine · July 2015

There is an example in the docs.

https://datatables.net/reference/option/columns.render

Adding hyperlink to each row

Adding hyperlink to each row

Answers

Howdy, Stranger!

Categories

DataTables

Adding hyperlink to each row

Adding hyperlink to each row

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables