0

我正在尝试使用 Jquery 创建缩略图分页。一切正常。我唯一的问题是我不知道如何在每个页面加载时增加计数。下面是我的代码。我的主要目标是，如果用户单击下一步按钮，我想在这个 php/reverse.php?page="+page 上增加 1。如果 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
  ));
?>
4

1 回答 1

0

首先你需要返回请求的状态

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;
});
于 2013-04-13T08:04:07.060 回答