Jquery URL Pagination


Jquery URL Pagination

我使用jQuery和AJAX从远程存储在服务器上的PHP文件中获取一些数据。我能够获取第一个页面并将结果显示在HTML表中。我现在面临另一个问题:我试图获取所有页面,然后对所有这些页面进行分页。

这是我迄今为止的代码:

 <html>
 <head>
 <title>Food Hygiene Ratings</title>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap  /3.3.5/css/bootstrap.min.css">

<style>
header {
background-color: black;
color: white;
text-align: center;
padding: 5px;} 
footer {
background-color: black;
color: white;
clear: both;
ext-align: center;
padding: 5px; }
th, td {
text-align: center;
padding: 8px; }
tr:nth-child(even){background-color: #e65c00}
th {
background-color: #000000;
color: white; }} 
</style>

<script> 
$.getJSON("http://xxx.ac.uk/xxxx/xxxx/xxx/hygiene/hygiene.php?op=retrieve&page=1", function(data){$.each(data, function(index,el){
$("#id").append("<tr><td>"+el.business+"</td><td>"+el.address+"</td><td>"+el.rating+"</td><td>"+el.date+"</td></tr>"); })}); 

</script>

</head>

<header><h1>Food Hygiene Ratings</h1></header>
<p><center>This page will display the results of the fast food shops and restaurants located in and around London</center></p>

<center><table width="1032" height="41" id="id"  style=width:95%">
<tr>
<th width="130">Business</th>
<th width="130">Address</th>
<th width="100">Rating</th>
<th width="100">Date</th>
</tr>
</table></center>

</body>
</html>

这是PHP脚本:

<?php
 // Load the XML file from the same location as this script
 if(file_exists('city.xml')) {
 $xml = simplexml_load_file("city.xml");
 } else {
 exit('Failed to open city.xml');
 }
 // Copy the values of the relevant elements of the XML into a PHP array.
 // We're not copying everything, and we're changing the names
 // Cast to (string) is so we don't copy the SimpleXMLElement objects
 $i = 0 ; $json = array();
 foreach($xml->EstablishmentCollection->EstablishmentDetail as $elem) {
 $json[$i]['id'] = (string) $elem->FHRSID;
 $json[$i]['business'] = (string) $elem->BusinessName;
 $json[$i]['address'] = $elem->AddressLine1.', '.$elem->AddressLine2.',     '.$elem->PostCode;
$json[$i]['rating'] = (string) $elem->RatingValue;
$json[$i]['date'] = (string) $elem->RatingDate;
$i++;
}
 $numpages = (int) ((sizeof($json) + 39) / 40);
 // Output the JSON encoding of $len elements of the array, starting at $start
 // Stop if we hit the end of the array
 function generate($start, $len) {
 global $json;
 echo('[');
 for($i = $start; $i < ($start + $len); $i++) {
     if(!array_key_exists($i, $json)) break;    // stop at end of array
     if($i != $start) echo(',');
     echo(json_encode($json[$i]));
 }
 echo(']');
 }
 // Search the business names in the array and output the JSON version of any matches
// Limit 40 matches
 function search($str) {
 global $json;
 $i = 0;
 echo('[');
 foreach($json as $elem) {
     if(strpos($elem['business'], $str) !== false) {
         // matches, encode it
         if($i != 0) echo(',');
         echo(json_encode($elem));
         $i++;
         if($i == 40) break;    // enough
     }
 }
 echo(']');
 }
 // Default operation
 if(empty($_GET['op'])) {
generate(0, 10);
return;
}
$op = $_GET['op'];
if($op == 'demo') {
     generate(0,10);
} elseif($op == 'pages') {
 echo('{"pages": '.$numpages.'}');
 } elseif($op == 'retrieve') {
 if(empty($_GET['page'])) die('Retrieve with no page number');
 $pageno = (int) $_GET['page'];
 if(($pageno < 1) || ($pageno > $numpages)) die('Page requested out of range: '.$pageno);
 generate(40 * ($pageno - 1), 40);
 } elseif($op == 'searchname') {
 if(empty($_GET['name'])) die('Empty search string');
 search($_GET['name']);
 } else die('Unknown op: '.$op);
 ?>

因为您使用的是ajax,所以您可以只加载请求的页面,而不是一次加载所有页面。

您可以使用hygiene.php检索页数?op=页面

然后你知道你要显示多少页面,你可以显示你的页面链接并加载第一个页面。

加载页面:hygiene.php?op=检索&第1页

或者第2页,例如hygiene.php?op=检索&page=2