簡體   English   中英

使用Javascript,PHP和MySQL分頁

[英]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);
  1. 創建一個結果限制變量($ limit = 10)
  2. 創建一個“頁面” GET參數
  3. 使用mysql“ LIMIT [offset],[count]”子句過濾行。 偏移量是跳過的行數:$ offset = $ limit * $ page;

Filter3.php將類似於:

$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);

然后,您可以使用“頁面”參數在HMTL / javascript中放置鏈接以在頁面之間導航。

注意:請考慮重構數據庫連接的方式(而不是代碼中的硬編碼憑據)並填充參數(正確的方法是對查詢進行參數設置並解析/檢查從客戶端收到的所有參數)。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM