Ajax implements paging of PHP without refreshing

  • 2020-03-31 20:56:21
  • OfStack

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title> The outcome of the vote </title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<script type="text/javascript"> 
function GetXmlHttpObject() 
{ 
var xmlHttp=null; 
try 
{ 
// Firefox, Opera 8.0+, Safari 
xmlHttp=new XMLHttpRequest(); 
} 
catch (e) 
{ 
// Internet Explorer 
try 
{ 
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
} 
catch (e) 
{ 
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
} 
return xmlHttp; 
} 
function checkajax(){ 
xmlHttp=GetXmlHttpObject() 
if (xmlHttp==null) 
{ 
alert (" Your browser does not support it AJAX ! "); 
return ; 
}else 
{ 
return xmlHttp; 
} 
} 
function preshow(){ 
ajaxobj = checkajax(); 
var url = "page.php?page=1"; 
ajaxobj.onreadystatechange=stateChanged; 
ajaxobj.open("GET",url,true); 
ajaxobj.send(null); 
} 
function showHint1(str) 
{ 
ajaxobj = checkajax(); 
document.getElementById("msg").innerHTML=" Reading data... "; 
var url = str; 
ajaxobj.onreadystatechange=stateChanged; 
ajaxobj.open("GET",url,true); 
ajaxobj.send(null); 
} 
function showHint2(str) 
{ 
ajaxobj=checkajax(); 
document.getElementById("msg").innerHTML=" Reading data... "; 
var url = str; 
ajaxobj.onreadystatechange=stateChanged; 
ajaxobj.open("GET",url,true); 
ajaxobj.send(null); 
} 
function showHint3(str) 
{ 
ajaxobj=checkajax(); 
document.getElementById("msg").innerHTML=" Reading data... "; 
var url = str; 
ajaxobj.onreadystatechange=stateChanged; 
ajaxobj.open("GET",url,true); 
ajaxobj.send(null); 
} 
function showHint4(str) 
{document.getElementById("msg").style.display="none"; 
ajaxobj=checkajax(); 
document.getElementById("msg").innerHTML=" Reading data... "; 
var url = str; 
ajaxobj.onreadystatechange=stateChanged; 
ajaxobj.open("GET",url,true); 
ajaxobj.send(null); 
} 
function stateChanged() 
{ 
if (xmlHttp.readyState==4) 
{ 
document.getElementById("message").innerHTML=xmlHttp.responseText; 
} 
} 
</script> 
</head> 
<body onload="preshow()"> 
<div id="wrapper"> 
<h4> User comments are as follows: </h4> 
<div id="message"> 
</div> 
</div> 
</body> 
</html> 

 
<?php 
$link = mysql_connect('localhost', 'root', '') or die(mysql_error()); 
mysql_select_db('vote', $link) or die(mysql_error()); 
mysql_query("set names utf8"); 
$num = 3; 
$url = "page.php"; 
$con = "<ul id='msg'>"; 
$page = (isset($_REQUEST['page'])) ? $_REQUEST['page'] : 1; 
$offset = ($page - 1) * $num; 
$result = mysql_query("SELECT COUNT(*) FROM client"); 
$total = mysql_fetch_row($result); 
$total = $total[0]; 
$pagenum = ceil($total / $num); 
$page = min($pagenum, $page); //For the home page
$prepg = $page - 1; //The previous page
if ($prepg <= 1) 
$prepg = 1; 
$nextpg = ($page == $pagenum ? 1 : $page + 1); //The next page
//If there is only one page, the function pops up:
if ($pagenum <= 1) 
return false; 
$sql = "SELECT `name`,`content` FROM `client` LIMIT " . $offset . "," . $num; 
$res = mysql_query($sql); 
while ($content = mysql_fetch_row($res)) { 
$con .= "<li><span>$content[0]:</span>&nbsp;&nbsp;$content[1]</li>"; 
} 
$con .= "</ul>"; 
$con .= <<< PAGE 
<p id="page"><a href="#" id="first" onclick="showHint1('$url?page=1')"> Home page </a>|<a href="#" id="pre" onclick="showHint2('$url?page=$prepg')"> The previous page </a>|<a href="#" id="next" onclick="showHint3('$url?page=$nextpg')"> The next page </a>|<a href="#" id="last" onclick="showHint4('$url?page=$pagenum')"> back </a></p> 
PAGE; 
echo $con; 
?> 

Related articles: