Hey Girls & Boys,

How do I add Ajax to the following PHP code so that when the "Next" & "Previous Screen" buttons don't navigate to a different page upon them being clicked, in order to view the next/previous 8 records?

Code PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Index.css" />
</head>
 
<body scroll="no">
<?php
$con = mysql_connect("localhost","peter","abc123");
if (!$con)
{
  die('Could not connect: ' . mysql_error());
}
 
mysql_select_db("TS", $con);
 
$perpage = 8;
 
$start = (isset($_GET['id'])) ? $_GET['id'] : 0;
 
$TotalRec = mysql_result(mysql_query("SELECT COUNT(*) FROM Buttons"), 0);
 
$select = "SELECT * FROM Buttons LIMIT $start, $perpage";
$result = mysql_query($select) or die(mysql_error());
 
echo '<div id="Bar"></div>';
echo '<div id="Container">';
 
if($TotalRec==0)
{
  echo "No Records Found, Please Add Some Records!";
}
else
{
  # Dislay your rows here in the loop
  while($row = mysql_fetch_array($result))
  {
    echo '<div class="But">';
    echo   '<img id="ButImg" src="ButImg.bmp">';
    echo   '<div id="ButTitle">' . $row['Title'] . '</div>';
    echo   '<div id="ButBody">' . $row['Description'] . '</div>';
    echo   '<img id="But_tl" src="But_tl.gif">';
    echo   '<img id="But_tr" src="But_tr.gif">';
    echo   '<img id="But_bl" src="But_bl.gif">';
    echo   '<img id="But_br" src="But_br.gif">';
    echo '</div>';
  }
}
if($start == 0)
{
  echo '<div id="ButPrevDis">';
  echo   '<div id="NavDis">Previous Screen</div>';
  echo '</div>';
}
else
{
  echo '<div id="ButPrevEna">';
  echo   "<a href=\"./Display.php?id=" . ($start - $perpage) . "\" class=\"NavEna\">Previous Screen</a>";
  echo '</div>';
}
 
$page = ($_GET['id'] / $perpage) + 1;
$total = ceil($TotalRec / $perpage);
 
echo '<div id="Pag">';
echo   '<div id="PagCap">' . "Screen " . $page . " of " . $total . '</div>';
echo   '<img id="Pag_tl" src="Pag_tl.gif">';
echo   '<img id="Pag_tr" src="Pag_tr.gif">';
echo   '<img id="Pag_bl" src="Pag_bl.gif">';
echo   '<img id="Pag_br" src="Pag_br.gif">';
echo '</div>';
 
if($start + $perpage >= $TotalRec)
{
  echo '<div id="ButNextDis">';
  echo   '<div id="NavDis">Next Screen</div>';
  echo '</div>';
}
else
{
  echo '<div id="ButNextEna">';
  echo   "<a href=\"./Display.php?id=" . ($start + $perpage) . "\" class=\"NavEna\">Next Screen</a>";
  echo '</div>';
 
}
 
echo '</div>';
?>
</body>
</html>