Ajax-Request Mit vorherigen und nächsten Objekt erhalten

Question

ich eine Ajax-Funktion zu erstellen, versuche, die nach ihrer Anfertigung eines Artikels Navigation schaffen wird, so kann der Benutzer durch Artikel mit vorherigen (älteren) und weiter zum nächsten (neueren) navigieren Links.

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

     });            
    }); 
    } 
}); 

ich Schwierigkeiten habe die Funktion verantwortlich für das Erhalten des Artikels nach ihrem Datum Wert zu konstruieren.

Mit console.log(article), erhalte ich folgende Werte:

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

So soll es möglich sein, die created_at Variable für die Navigation zu verwenden, aber ich weiß nicht, wie in der Minute. Irgendwelche Ideen?

CMS: Edicy Hinweis: Das CMS PHP nicht unterstützt.

EDIT: Die Artikelauflistung auf der "Blog" -Seite von der CMS-Entwickler-Dokumentation zur Verfügung gestellt.

Answer 1

Der einfachere Weg, es zu tun ist, verwenden Sie Ihr Modell so viel wie Sie können, und tun Sie es mit SQL "Limit" Ich weiß nicht, welche Datenbank verwenden, also werde ich einige Schritte mit MySQL-Datenbank machen . Ich bin verwirrt mit Ihrem Code, warum Sie Ajax anrufen, ohne nichts zu drücken? oder du versteckst irgendeinen Code?

mich mit diesem Code versuchen lassen: davon ausgehen, dass Sie einen Container div und 2 statische Navigationstaste

<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> 

für das Backend haben:

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

Ich möchte meine Antwort Ihnen helfen.

Answer 2

überprüfte ich die API auf Edicy, scheint, wie es Ihnen von created_at zu filtern nicht gestattet.

Aber basierend auf dem Code, können Sie Abfrage-String erhalten den aktuellen Index des Artikels in einer bestimmten Seite verwenden.

Zum Beispiel:

beginnen mit http://insenerid.edicy.co/uudised/2013/ es auch Seite aufgerufen wird 1. Es gibt 4 Artikel und Sie haben ?page=1&index={0..3} zu jedem Artikel URL wie folgt hinzuzufügen:

von http://insenerid.edicy.co/uudised/2013/aasta-ehitusprojekt-2012-tiitli-kandidaadiks

zu http://insenerid.edicy.co/uudised/2013/aasta-ehitusprojekt-2012-tiitli-kandidaadiks?page=1&index=1 (weil es der zweite Artikel auf Seite 1 ist)

Dann ändern sie den Code:

// 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

Wenn Ihre Frage ist, wie Sie die von Ihrem AJAX-Anruf empfangenen Daten sortieren, können Sie einfach vorher die array.sort ([compareFunction]) verwenden, um sie zu verwenden. (siehe https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)

wie folgt aus:

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