使用ajax请求获取上一个和下一个对象

Question

我正在尝试创建一个Ajax函数,它将根据创建日期创建文章导航,因此用户可以使用以前(较旧)和下一个(较新)链接浏览文章.

<div class="content clear">

  <div class="article">
    Article contents...
  </div>

  <a href="#Prev" id="prev" class="leftarrow" title="Previous">EELMINE<span class="arrow_left"></span></a>
  <a href="#"     id="bactolist" onClick="history.go(-1); return false;">Tagasi nimekirja juurde<span class="arrow_middle"></span></a>
  <a href="#Next" id="next" class="rightarrow" title="Next">JÄRGMINE<span class="arrow_right"></span></a>
</div> <!-- End content -->

<script type="text/javascript">

$.ajax({
  url: '/admin/api/site/articles.json?per_page=100',
  dataType: 'json',
  success: function(articles) {
    $(articles).each(function(index, article) {

      console.log(article);

      $('div.article').fadeOut(0);        
      $('div.article:first').fadeIn(500);  
      $('a.leftarrow, a.rightarrow').click( function (ev) {

        //prevent browser jumping to top
        ev.preventDefault();

        //get current visible item
        var $visibleItem = $('div.article:visible');

        //get total item count
        var total =  $('div.article').length;

        //get index of current visible item
        var index = $visibleItem.prevAll().length;

        //if we click next increment current index, else decrease index
        $(this).attr('href') === '#Next' ? index++ : index--;

        //if we are now past the beginning or end show the last or first item
        if (index === -1){
          index = total-1;
        }
        if (index === total){
          index = 0
        }

        //hide current show item
        $visibleItem.hide();

        //fade in the relevant item
        $('div.article:eq(' + index + ')').fadeIn(500);

      });                                               
    });
  }
});

我在构建负责根据日期值获取文章的功能时遇到了困难.

使用console.log(article),我得到以下值:

body: "..."
comments_count: 0
comments_url: "..."
created_at: "date and time ..."
excerpt: "..."
title: "..."
url: "..."

所以应该可以使用created_at变量进行导航,但我不知道如何.有任何想法吗？

使用的CMS:Edicy 注意: CMS不支持PHP.

编辑: CMS开发人员文档提供的"博客"页面上的文章列表示例.

Answer 1

更简单的方法是尽可能多地使用你的模型，并使用 sql“limit” 来完成它，我不知道你使用什么数据库，所以我将使用 mysql 数据库执行一些步骤。我对你的代码感到困惑，为什么你在没有任何按下的情况下调用ajax？或者你隐藏了一些代码？

让我尝试一下这段代码：假设您有一个容器 div 和 2 个静态导航按钮

<a href="#" id="next" data-page="2">Next</a>
<a href="#" id="back" data-page="0">Back</a>

<div id="container"></div>

<script>
  $("#next, #back").click(function(){
    //get page number 
    //0 means no page to load
    var page = $(this).data("page");
    if(page == 0)return false;
    $.ajax({
      url : "your/url/?page=" + page,
      dataType: "json",
      success : function(data){
        var container = $("#container");
        $.each(data, function(index, article){
          container.append(article); // or do something you want
        });
        if($this.attr("id") == "next") $("#next, #prev").data("page", $this.data("page") + 1);
        else $("#next, #prev").data("page", $this.data("page") - 1);
      }
    });
  });
</script>

对于后端：

    <?php
    $page = $_GET["page"];
    $perPage = 100;
    $start = ($page - 1) * $perPage; // minus 1, because limit start from 0

    $sql = "SELECT * FROM table WHERE 1=1 LIMIT $start, $perPage";

    //execute the sql and get the result (ex. result)

    echo json_encode($result);

希望我的回答对您有所帮助。