使用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。

編輯：文章列表sample在由CMS開發者文檔提供的「博客」頁面上。

Answer 1

更簡單的方法來做到這一點是利用你的模型儘可能就可以了，用sql「限制」 我不知道你用什麼數據庫做，所以我會用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); 

我希望我的回答可以幫助你。

Answer 2

我在edicy上檢查了API，好像它不允許你通過created_at進行過濾。

但基於您的代碼，您可以使用查詢字符串獲取特定頁面中文章的當前索引。

例如：

開始http://insenerid.edicy.co/uudised/2013/，它也被稱爲1頁共有4篇文章，你必須添加?page=1&index={0..3}到每篇文章的網址是這樣的：從http://insenerid.edicy.co/uudised/2013/aasta-ehitusprojekt-2012-tiitli-kandidaadiks

到http://insenerid.edicy.co/uudised/2013/aasta-ehitusprojekt-2012-tiitli-kandidaadiks?page=1&index=1（因爲它是第1頁的第二篇文章）

然後，修改您的代碼：

// This is for example: page = 1, index = 1 
// You have to write extra code to get the query string you need. 
var page = 1, index = 1; 
$.ajax({ 
    url: '/admin/api/site/articles.json?per_page=100&page=' + page, 
    // ... 
    // Replace 
    // $('div.article:first').fadeIn(500); 
    // with 
    $('div.article:eq(' + index + ')').fadeIn(500); 

Answer 3

如果你的問題是如何對你的ajax調用 收到的數據進行排序，你可以簡單地使用array.sort（[compareFunction]）來使用它們。 （見https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort）

這樣的：

 ... 
    success: function(articles) { 

     articles.sort(function (a, b) { 
     var d1 = new Date(a.created_at); 
     var d2 = new Date(b.created_at); 
     if (d1 < d2) return -1; 
     if (d1 == d2) return 0; 
     return 1; 
    }); 

    $(articles).each(function(index, article) { 

     // alert(article.created_at); 

     console.log(article); 
     ....