Pagination with Javascript, Php & MySQL

我正在尝试基于本教程建立一个简单的新闻页面

http://www.prashantblog.com/use-ajax-filter-mysql-results-set/

它从数据库中获取数据并为每个部分创建div，并将根据选中的复选框过滤结果。

我需要将显示的结果限制为最多10个，然后添加分页，以便用户可以转到结果的下一个页面，但如果他们单击了一个复选框，结果仍然会被过滤。

我对逻辑如何工作以及我需要做什么才能使分页工作有点困惑。

Javascript:

var base_href = '/go/media~';
function makeTable(data) {
  var tbl_body = "";
  $.each(data, function (index, row) {
    var tbl_row = "";
    $.each(row, function (k, v) {
      if (k == 'heading' && 'id' in row) {
        v = '<h2><a class="news" href="' + base_href + row.id + '">' + v + '</a></h2>';
      }
      if (k == 'id' in row) {
        v = '<div style="display:none">' + v + '</div>';
      }
      tbl_row += "<div class='row'><div class='col-md-8 col-md-offset-2'>"
        + v + "   </div></div>";
    });
    tbl_footer = '<div class="row read-more"><div class="col-md-8 col-md-offset-2"><a href="' + base_href + row.id + '">Read more</a></div></div>';
    tbl_body += "<div class='non-white-media'>" + tbl_row + tbl_footer + "</div>";
  });
  return tbl_body;
}
function getEmployeeFilterOptions() {
  var opts = [];
  $checkboxes.each(function () {
    if (this.checked) {
      opts.push(this.name);
    }
  });
  return opts;
}
function updateEmployees(opts) {
  $.ajax({
    type: "POST",
    url: "filter3.php",
    dataType: 'json',
    cache: false,
    data: {filterOpts: opts},
    success: function (records) {
      $('#employees div').html(makeTable(records));
    }
  });
}
var $checkboxes = $("input:checkbox");
$checkboxes.on("change", function () {
  var opts = getEmployeeFilterOptions();
  updateEmployees(opts);
});
updateEmployees();

Filter3.php

<?php
$pdo = new PDO('mysql:host=localhost;dbname=xxx', 'xxx', 'xxx');
$select = 'SELECT id, heading, summary, created_date';
$from = ' FROM media';
$where = ' WHERE TRUE';
$opts = isset($_POST['filterOpts']) ? $_POST['filterOpts'] : array('');
if (in_array("article", $opts)) {
    $where .= " AND article = 1";
}
if (in_array("press_release", $opts)) {
    $where .= " AND press_release = 1";
}
if (in_array("video", $opts)) {
    $where .= " AND video = 1";
}
$sql = $select . $from . $where;
$statement = $pdo->prepare($sql);
$statement->execute();
$results = $statement->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($results);
echo($json);

$limit = 10;
$page = intval($_GET["page"]);
$pdo = new PDO('mysql:host=localhost;dbname=xxx', 'xxx', 'xxx');
$select = 'SELECT id, heading, summary, created_date';
$from = ' FROM media';
$where = ' WHERE TRUE';
$opts = isset($_POST['filterOpts']) ? $_POST['filterOpts'] : array('');
if (in_array("article", $opts)) {
    $where .= " AND article = 1";
}
if (in_array("press_release", $opts)) {
    $where .= " AND press_release = 1";
}
if (in_array("video", $opts)) {
    $where .= " AND video = 1";
}
$offset = $page * $limit; //skip rows from previous pages
$limit = " LIMIT $offset,$limit";
$sql = $select . $from . $where;
$sql .= $limit;
$statement = $pdo->prepare($sql);
$statement->execute();
$results = $statement->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($results);
echo($json);