AJAX pagination w/ MySQL database subset

Question

I have a page that uses mysql & meekrodb to pull info from a database. The results are limited to 15 per page & to an alphanumeric subset of the database - In this Example, 1-3 & A-B

I now want to add pagination when click either #goleft or #gort, then it will pull the correct items from database.

How do I call an ajax call to pagination.php & pass the variable $start to it? Not sure about everything, please correct if I have something in wrong place. Not sure if $start,15 is correct in pagination.php

I've gotten this far:

Main page:

<?php
require_once 'meekrodb.2.2.class.php';
require_once 'dconnect.php';  // database login info
// currently pulling $results from database on initial pg load
$results = DB::query("SELECT substr(theme, 1, 1) as Alphabet, theme, developer, thumb, thumb_lg FROM gallery ORDER BY (CASE Alphabet
  WHEN '1' THEN 1
  WHEN '2' THEN 2
  WHEN '3' THEN 3  
  WHEN 'A' THEN 4
  WHEN 'B' THEN 5
  ELSE 6
  END), theme
  LIMIT 15");
// get count of all relevant items
$tcount = DB::query("SELECT substr(theme, 1, 1) as Alphabet, theme, developer, thumb, thumb_lg FROM gallery ORDER BY (CASE Alphabet
  WHEN '1' THEN 1
  WHEN '2' THEN 2
  WHEN '3' THEN 3  
  WHEN 'A' THEN 4
  WHEN 'B' THEN 5
  ELSE 6
  END), theme");
// get count of all relevant items
$counter = DB::count();
$ipp = 15;  // items per page
$tpages = ceil($counter / $ipp);  // total pages

// write each entry to specific div;
$x = 0;
foreach ($results as $row) {
  $x++;
  if ($x == 1) {
    $t1 = $row['theme'];
    $d1 = $row['developer'];
    $th1 = $row['thumb'];
    $thlg1 = $row['thumb_lg'];
  }
  ... Additional if's through 15th item
}
?>

Basic Html:

<img src="<?php echo($th1); ?>" data-retina="<?php echo($thlg1); ?>" alt="<?php echo($t1); ?>" />
<span><p class="hname"><?php echo($t1); ?></p>
<div class="bull">&bull;</div>
<p class="hdev"><?php echo($d1); ?></p></span>
...
<div id="thumbnav"><div id="goleft"></div><div id="gort"></div></div>

Main pg jQuery:

// Previous button
var curpg = 1;
$('#goleft').mouseup (function() {
  var newpg = curpg - 1;
  if (newpg == 0) {newpg = 1} // reset page if going back to first page
  curpg = newpg;
  var $start = (newpg - 1) * 15 + 1;
  // how to pass $start to pagination.php ??
});

// Next button
$('#gort').mouseup (function() {
  var newpg = curpg + 1;
  var $totpgs = <?php echo $tpages; ?>;  // DOESN'T Echo anything !!!
  console.log('Total Pages: ' + $totpgs);
  if (newpg > $totpgs) {newpg = $totpgs}  // limit page to total pages
  curpg = newpg;
  var $start = (newpg - 1) * 15 + 1;
  console.log('Start: ' + $start);
  // how to pass $start to pagination.php ??
});

Pagination.php:

<?php
require_once 'meekrodb.2.2.class.php';
require_once 'dconnect.php';  // database login info
// pull from database using specific page items
$results = DB::query("SELECT substr(theme, 1, 1) as Alphabet, theme, developer, thumb, thumb_lg FROM gallery ORDER BY (CASE Alphabet
  WHEN '1' THEN 1
  WHEN '2' THEN 2
  WHEN '3' THEN 3  
  WHEN 'A' THEN 4
  WHEN 'B' THEN 5
  ELSE 6
  END), theme
  LIMIT $start,15");
?>

Update 1: Pagination.php

<?php
$start = $_POST['start'];  // capture input from AJAX
require_once 'meekrodb.2.2.class.php';
require_once 'dconnect.php';
// pull from database using specific page items
$navresults = DB::query("SELECT substr(theme, 1, 1) as Alphabet, theme, developer, thumb, thumb_lg FROM gallery ORDER BY (CASE Alphabet
  WHEN '1' THEN 1
  WHEN '2' THEN 2
  WHEN '3' THEN 3  
  WHEN 'A' THEN 4
  WHEN 'B' THEN 5
  ELSE 6
  END), theme
  LIMIT $start,15");
$x = 0;
foreach ($navresults as $row) {
  $x++;
  if ($x == 1) {
    $t1 = $row['theme'];
    $d1 = $row['developer'];
    $th1 = $row['thumb'];
    $thlg1 = $row['thumb_lg'];
  }
  ... up to 15th variable set
}

Main jQuery:

//Next pagination
$('#gort').mouseup (function() {
  var newpg = curpg + 1;
  var $totpgs = <?php echo $tpages; ?>; // Doesn't show echo !!!
  console.log('Total Pages: ' + $totpgs);
  if (newpg > $totpgs) {newpg = $totpgs}  // limit page to total pages
  curpg = newpg;
  var $start = (newpg - 1) * 15 + 1;
  console.log('Start: ' + $start);
  $.ajax({
    url:'pagination.php',
    type:'POST',
    data:{start:$start},
    dataType:'text'
  });
});

Answer 1

You need to make an ajax call to pagination.php

$('#goleft').mouseup (function() {
    var newpg = curpg - 1;
    if (newpg == 0) {newpg = 1} // reset page if going back to first page
    curpg = newpg;
    var $start = (newpg - 1) * 15 + 1;
    $.ajax({
        url:'pagination.php',
        type:'POST',
        data:{start:$start},
        dataType:'json'
    }).done(function(response) {
        tableparser(response);
    });
});

So, you see, now you need a function (which I named tableparser) to parse JSON and fill your HTML table.

At the same time, you need your pagination.php script to answer with valid JSON

<?php
$start = $_POST['start'] // I'm capturing the input sent from Ajax
require_once 'meekrodb.2.2.class.php';
require_once 'dconnect.php';  // database login info
// pull from database using specific page items
$results = DB::query("SELECT substr(theme, 1, 1) as Alphabet, theme, developer, thumb, thumb_lg FROM gallery ORDER BY (CASE Alphabet
  WHEN '1' THEN 1
  WHEN '2' THEN 2
  WHEN '3' THEN 3  
  WHEN 'A' THEN 4
  WHEN 'B' THEN 5
  ELSE 6
  END), theme
  LIMIT $start,15");

echo json_encode($results);

I don't know the particular implementation of your DB Query, but once you have your results in an array, you need to output them json_encoded for jQuery to receive them as an object.