0

Hey guys,

I have a Table which utilises Twitches API where the offset needs to be in increments of 25. I want to make it so everytime you click next in a table of data it reloads the query but adds +25 to the offset.

Here is what I have:

<?php
$json = json_decode(file_get_contents("https://api.twitch.tv/kraken/channels/greatbritishbg/follows?limit=25&offset=".$offset));
$offset = 0;
$currentFollower = 0;
$currentPage     = 0;
$resultsPerPage  = 24;
// Use http://json.parser.online.fr/ to get the string parse of the Json_Decode
$tableHtml = <<<TABLE
<div id="page-number-%s" style="%s">
    <table>
        <tr>
            <th>Username:</th>
            <th>Follow Date:</th>
            <th>Type:</th>
        </tr>
        %s  
    </table>
</div>
TABLE;
$rowHtml = <<<ROW
<tr>
    <td><a href="%s">%s</a></td>
    <td>%s</td>
    <td>%s</td>
</tr>
ROW;
$html = "";
$rows = "";
foreach ($json->follows as $follow)
{
    if ($currentFollower % $resultsPerPage == 0 && $currentFollower> 0)
    {
        $style = $currentPage === 0 ? '' : 'display:none';
        $html .= sprintf($tableHtml, $currentPage, $style, $rows);
        $rows = "";
        $currentPage++;
    }   
    $rows .= sprintf(   $rowHtml, 
                        $follow->user->_links->self,  
                        $follow->user->name . ' (' . $currentFollower . ')',
                        $follow->user->created_at,
                        $follow->user->type
    );
    $currentFollower++;
}
$html .= <<<BUTTONS
<button onclick="previousPage()">previous</button> 
<button onclick="nextPage()">next</button>
BUTTONS;
$javascript = <<<JS
<script>
var currentPage = 0;
function previousPage() {
    if(currentPage > 0)
    {
        document.getElementById('page-number-'+currentPage).style.display = 'none';
        $offset = $offset - 24;
        currentPage--;
        document.getElementById('page-number-'+currentPage).style.display = '';
        $('table').load('getData.cfm');
    }
};
function nextPage() {
    if(currentPage < {$currentPage} - 1)
    {
        document.getElementById('page-number-'+currentPage).style.display = 'none';
        $offset = $offset + 24;
        currentPage++;
        document.getElementById('page-number-'+currentPage).style.display = '';
        $('table').load('getData.cfm');
    }
};
</script>
JS;
echo $javascript.$html;
?>

When I click Next, nothing happens.
This is how it should work:

https://api.twitch.tv/kraken/channels/greatbritishbg/follows?limit=25&offset=0
https://api.twitch.tv/kraken/channels/greatbritishbg/follows?limit=25&offset=25
https://api.twitch.tv/kraken/channels/greatbritishbg/follows?limit=25&offset=50
https://api.twitch.tv/kraken/channels/greatbritishbg/follows?limit=25&offset=75

etc

Edited by bradly.spicer

2
Contributors
2
Replies
18
Views
2 Years
Discussion Span
Last Post by bradly.spicer
0

On line 3 you are setting $offset to 0. I think you're intending to get this from the URL so the line should be:

$offset = $_GET['offset'];

This will get whatever value is in the URL. You'll want to force it to 0 if it's not set with an if statement:

if (isset($_GET['offset'])) //check if the URL has anything set for "offset"
{
    $offset = $_GET['offset']; //set it to the URL value if it is set
}
else
{
    $offset = 0; //Set to 0 if it is not set.
}
0

Hi Borzoi, thanks for this. Still unsure of how to make it so when you run the nextPage() function it will re run the json query and produce the next set of information with the offset changed

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.