How to add a “href” link in a td of data table to open a PHP page

Question

I have this server side table that works fine, except it has modals, but I need to open another PHP edit page(not as modal), linked to the row-id selected.

 </div>
   <div class="table-responsive">
    <table id="users_data" class="table table-bordered table-striped">
     <thead>
      <tr>
       <th data-column-id="id" data-type="numeric">No</th>
        <th data-column-id="idno">Id No</th>
        <th data-column-id="surname">Surname</th>
        <th data-column-id="firstname">Firstname</th>
       <th data-column-id="category_name">Category</th>
       <th data-column-id="age">Age</th>
       <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
      </tr>
     </thead>
    </table>

    <script type="text/javascript" language="javascript" >
$(document).ready(function(){
 $('#add_button').click(function(){
  $('#users_form')[0].reset();
  $('.modal-title').text("Add New Users");
  $('#action').val("Add");
  $('#operation').val("Add");
 });

 var usersTable = $('#users_data').bootgrid({
  ajax: true,
  rowSelect: true,
  post: function()
  {
   return{
    id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
   };
  },
  url: "fetch.php",
  formatters: {
   "commands": function(column, row)
   {
return "<button type='button'  class='btn btn-warning btn-xs update' data-row-id='"+row.id+"'>Edit</button>" + 
"&nbsp; <button type='button'  class='btn btn-danger btn-xs delete' data-row-id='"+row.id+"'>Delete</button>";

   }
  }
 });

Where the buttons are, I need something like this:

  <td><a href="update2.php?u=<?php echo $row['id'] ?>"><span class="glyphicon glyphicon-pencil" aria-hidden="true" </span><b><font size="3" color="red"</font> Edit<b></a></td>

Currently it uses this modal info:

 $(document).on("loaded.rs.jquery.bootgrid", function()
 {
  usersTable.find(".update").on("click", function(event)
  {
   var id = $(this).data("row-id");
    $.ajax({
    //url:"update2.php",    
    url:"fetch_single_entries.php",
    method:"POST",
    data:{id:id},
    dataType:"json",
    success:function(data)
    {
     $('#usersModal').modal('show');



      $('#categories').val(data.categories);
     $('#idno').val(data.idno);
     $('#surname').val(data.surname);
     $('#firstname').val(data.firstname);
     $('#age').val(data.age);
     $('.modal-title').text("Edit User");
     $('#id').val(id);
     $('#action').val("Edit");
     $('#operation').val("Edit");
    }
   });
  });
 });

The fetch.php for the table data looks like this:

<?php
//fetch.php
include("connection.php");
$query = '';
$data = array();
$records_per_page = 10;
$start_from = 0;
$current_page_number = 0;
if(isset($_POST["rowCount"]))
{
 $records_per_page = $_POST["rowCount"];
}
else
{
 $records_per_page = 10;
}
if(isset($_POST["current"]))
{
 $current_page_number = $_POST["current"];
}
else
{
 $current_page_number = 1;
}
$start_from = ($current_page_number - 1) * $records_per_page;
$query .= "
 SELECT 
  users.id, 
  tblcategories.category_name, 
  users.idno,users.surname,users.firstname,    
  users.age FROM users 
  INNER JOIN tblcategories 
 ON tblcategories.category_id = users.category_id ";
if(!empty($_POST["searchPhrase"]))
{
 $query .= 'WHERE (users.id LIKE "%'.$_POST["searchPhrase"].'%" ';
 $query .= 'OR tblcategories.category_name LIKE "%'.$_POST["searchPhrase"].'%" ';
 $query .= 'OR users.idno LIKE "%'.$_POST["searchPhrase"].'%" ';
 $query .= 'OR users.surname LIKE "%'.$_POST["searchPhrase"].'%" ';
  $query .= 'OR users.firstname LIKE "%'.$_POST["searchPhrase"].'%" ';
 $query .= 'OR users.age LIKE "%'.$_POST["searchPhrase"].'%" ) ';
}
$order_by = '';
if(isset($_POST["sort"]) && is_array($_POST["sort"]))
{
 foreach($_POST["sort"] as $key => $value)
 {
  $order_by .= " $key $value, ";
 }
}
else
{
 $query .= 'ORDER BY users.id DESC ';
}
if($order_by != '')
{
 $query .= ' ORDER BY ' . substr($order_by, 0, -2);
}

if($records_per_page != -1)
{
 $query .= " LIMIT " . $start_from . ", " . $records_per_page;
}
//echo $query;
$result = mysqli_query($connection, $query);
while($row = mysqli_fetch_assoc($result))
{
 $data[] = $row;
}

$query1 = "SELECT * FROM users";
$result1 = mysqli_query($connection, $query1);
$total_records = mysqli_num_rows($result1);

$output = array(
 'current'  => intval($_POST["current"]),
 'rowCount'  => 10,
 'total'   => intval($total_records),
 'rows'   => $data
);

echo json_encode($output);

?>

Please assist this novice programmer about how to adjust the code.

Answer 1

Sounds like you just want to convert an jquery ajax edit thing on a modal dialogue into an actual HTML edit page. Replace all of that jquery with just a link to a new page you create, and on that page just have a form with the stuff in it. The first thing you'll want is to check if it's a GET or a POST request - if GET, query from the database for the values and display the standard HTML form. If it's a POST, update the database with the new values (after optionally doing some processing).

Hopefully that's the question you're asking? If so, sorry the answer is so broad, but the question is kind of broad too. Feel free to clarify further if there's a specific problem you're encountering trying to get the above to work.

Answer 2

Here is how to add the links:

return "<a href=\"update2.php?u=" + row.id + "\"><button type=\"button\" class=\"btn btn-xs btn-warning\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-pencil\"></span></button></a> " +
"<a href=\"delete2.php?u=" + row.id + "\"><button type=\"button\" class=\"btn btn-xs btn-danger\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-trash\"></span></button></a>";