This tutorial shows the possible paging of what our API server returns as the list of zones.

Usually, it’s hard to keep track of all the response pages when there are dozens of pages with dozens of items in each page. Our zones API can make this process easier with a few helpful flags in its response.

Below we are passing “pages”, “page” and “page_size” within standard zones API response so you can count total pages, the current page you’re looking into, and how many items there are per page. With this in mind, we can build something like the following code to support paging as part of a zone listing feature provided by our API.

The structure our API is generating is shown on the following print:

{"code":200,"data":{
      "page":"15",
      "pages":27,
      "page_size":"10",
      "current_page_size":10,
      "total":261,
      "pullzones":[{
      "id":"654321",
      "name":"ZONE",
      "username":"ALIAS",
      "company_id":"123456",
      "url":"https:\/\/www.maxcdn.com","
      port":"80",
      "ip":"IP.IP.IP.IP",
      "vhost":"www.maxcdn.com",
      "type":"2",
      "compress":"0",
      "backend_compress":"0",
      "queries":"1",
      "max_cache_size":"50000",
      "suspend":"0",
      "cache_valid":"1d",
      "content_encoding":"1",
      "label":null,"inactive":"0",
      "valid_referers":null,
      "key_zone_size":"50m",
      "expires":null,
      "disallow_robots":"0",
      "disallow_robots_txt":null,
      "canonical_link_headers":"0",
      "content_disposition":"0",
      "custom_domain_limit":"7",
      "locked":"0",
      "ssl":"0",
      "ssl_sni":"0",
      "sslshared":"0",
      "creation_date":"2015-06-10 19:30:03",
      "dsa_ip":null,
      "geo_enabled":"0",
      "set_host_header":null,
      "ssl_id":"0",
      "dns_check":"1",
      "ignore_expires_header":"1",
      "ignore_setcookie_header":"0",
      "hide_setcookie_header":"0",
      "ignore_cache_control":"0",
      "use_stale":"0",
      "proxy_cache_min_uses":"2",
      "proxy_cache_lock":"1",
      "proxy_cache_lock_timeout":"60s",
      "pseudo_streaming":"0",
      "secret":null,
      "upstream_enabled":"0",
      "proxy_inactive":"7d",
      "x_forward_for":"0",
      "webp_enabled":"0",
      "spdy":"0",
      "spdy_headers_comp":"0",
      "rawlog_export_enabled":"0",
      "cdn_url":"ZONE.ALIAS.netdna-cdn.com",
      "tmp_url":"ZONE.ALIAS.netdna-cdn.com"
},
{
      ...
}]
}}

Below we create a php script that generates HTML with paging components and interacts with the MaxCDN API server to fetch data as instructed by the paging logic:

<html>
<head>
<style>
.zone {
font-family: Verdana;
font-size: 10px;
font-color: Grey;
}
.paging {
font-family: Verdana;
font-size: 10px;
font-color: Orange;
}
.current_page {
font-family: Verdana;
font-size: 18px;
font-color: Black;
}
</style>
</head>
<body>
<div>
<p></p>
<?php
//html vars
//paging
$pageback = "";
$pagefwd = "";
$pages = "";
$p = "?page=1";
$paginator = "";
if($_GET["p"]){
$p = "?page=" . $_GET["p"];
}
//paging
//html vars
//vars
$items = "";
$l = "&page_size=10";
//vars
// Include Composer Autoloader
$loader = require_once(__DIR__ . "/../vendor/autoload.php");

$api = new MaxCDN("ALIAS", "SECRET", "KEY");
try {
$dump = $api->get('/zones/pull.json' . $p . '&' . $l);
$dump = json_decode($dump, true);
$c = $dump['data']['pages'];
$total = $c;
$p = $dump['data']['page'];
$i = 0;
foreach($dump['data']['pullzones'] as $zone){
     $items .= "<tr><td style='text-align:left;width:200px'>" . $zone['name'] . "</td><td style='margin-left:200px'>" . $zone['url'] . "</td><td style='text-align:center'><img src='imgs/" . str_replace(array("1", "0"), array("1.png", "0.png"), $zone['compress']) . "' width='6px'/></td><td style='text-align:center'><img src='imgs/" . str_replace(array("1", "0"), array("1.png", "0.png"), $zone['queries']) . "' /></td></tr>";
}
//paging logic
$current_page = "paging";
if($c > 1){
     for($i = 1; $i <= $c; $i ++){
          if($i == $p){
               $current_page = "current_page";
          }
          if($c < 11){
               $pages .= '<a class="' . $current_page . ' href="?p=' . $i . '">' . $i . ' </a>';
          }
          if($c > 10){
               if($p + 5 <= $c){
                    $c = $p + 5;
               }
          $pages .= '<a class="' . $current_page . '" href="?p=' . $i . '">' . $i . ' </a>';
          }
          $current_page = "paging";
     }
}
if($p > 1){
     $pageback = '<a href="?p=' . --$p . '">BACK </a>';
}
if($c > $p){
     $pagefwd = '<a href="?p=' . ++$p . '"> FWD</a>';
}
if($c == $p){
     $pagefwd = "";
}
//paging logic
echo "<div align='center'><table style='width: 500px;' class='zone'><tr><td>NAME</td><td>ORIGIN</td><td>GZIP</td><td>QueryString</td></tr>" . $items . "</table></div>";
$paginator = $pageback . " " . $pages . " " . $pagefwd;

echo "<br/><div align='center'><p class='paging'>You are on page " . $p . " of " . $total . " pages in total</p><br/>";

echo "<div class='paging'>" . $paginator . "</div>";

echo "</div>";

//Error handler
} catch(CurlException $e) {
     print_r($e->getMessage());
     print_r($e->getHeaders());
}
?>
</body>
</html>

We’ve used two files in the local folder “imgs” named “1.png” and “0.png” to indicate the status for GZIP and query string options.

This 10-minute paging version will output the following:

If you have any questions about paging logic and the MaxCDN zones API, feel free to leave a comment below.