Question

我正在尝试使用Jquery创建缩略图分页。一切都很好。我唯一的问题是我不知道如何增加每页加载的计数。以下是我的代码。我的主要目标是，如果用户单击下一个按钮，我想在此增加1 php / reverse.php？page =“+ page。如果没有更多来自php的结果，请不要再增加。在上一个按钮上也是如此。

    <html>
  <head>
    <title></title>
  </head>
  <body>
      <div id="par"></div>
      <input type="button" id="prev" value="Prev"/>
      <input type="button" id="next" value="Next"/>

      <script src="js/jquery.js"></script>
      <script>
        var default_val = 1;
        function get_page(page){
          $.ajax({
            url: "php/reverse.php?page="+page
          }).done(function(data) {
            $('#par').html(data.thumbs);
          });
        }

        $('#prev').click(function(){
            get_page(default_val)
        });


        $('#next').click(function(){
         get_page(default_val+1)
        });

        get_page(default_val);
      </script>
  </body>
</html>

这是我的PHP：

<?php
  require '../php/connect.inc.php';
  $per_page = 4;

  $pages_query = mysql_query("SELECT COUNT('id') FROM my_list");
  $pages = ceil(mysql_result($pages_query, 0) / $per_page);

  $page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
  $start = ($page - 1) * $per_page;


  $query = mysql_query("SELECT id, image_small FROM my_list LIMIT $start, $per_page");

  $results = array();
  while($mysql_fetch_assoc = mysql_fetch_assoc($query)){    
    $results[] = "<img src='img/".$mysql_fetch_assoc['image_small']."'/>";
  }      


  header('Content-type: application/json');

  echo json_encode(array(
    'thumbs' => $results,
    'pages' => $pages,
    'current_page' => $page,
    'per_page' => $per_page
  ));
?>

Answer 1

首先你需要返回请求状态

var page = 1;
function get_page(page){
  $.ajax({
    dataType: 'json',
    url: "php/reverse.php?page="+page
  }).done(function(data) {
    if (data.thumbs.length>0) {
      $('#par').html(data.thumbs);
      return true; // here
    } else
      return false; // and here
  });
}

接下来，当json返回false并增加或减少页数时，你想要的是阻塞函数

var block_next = false,
    block_prev = false;

$('#prev').click(function(){
  block_next = false;
  if (!block_prev)
    if (!get_page(page))
      block_prev = true;
    else
      page = page - 1;
});

$('#next').click(function(){
  block_prev = false;
  if (!block_next)
    get_page(page+1)
      block_next = true;
    else
      page = page + 1;
});

页面加载的增量计数

1 个答案: