从数据库检索Ajax

Question

I am creating a page to get images from the db as you scroll through, but my problem is if you scroll through the following website and get images from the db when someone adds a new image to the db, the next get images will be displayed again.

How do I prevent it?

HTML:

<div class="row">

    <div class="col-sm-6  rowL">

    </div>

    <div class="col-sm-6  rowR">            

    </div>

</div>

JS:

$(function()
{
    var load = 0;
    $(window).scroll(function(){

        var win =  $(window).height();
        var doc = $(document).height();
        var top = $(window).scrollTop();
        var loadat = doc - win;
        loadat = loadat - 200;

        if(top >= loadat)
        {
            load++;
            $.post('ajax.php', {load: load}, function(data)
            {                            
                var str = data;
                var res = str.split("split");

                //alert(res);

                $(".rowL").append(res[0],res[1],res[2],res[3],res[4]);
                $(".rowR").append(res[5],res[6],res[7],res[8],res[9]);
            });

        }
    });
});

PHP:

<?PHP
    include 'core/init.php';

    $db = DB::getInstance();
    $img = $db->Get('img'); 


    $load = $_POST['load'];

    $dane = $db->scroll($load);


    foreach($dane as $key=>$value)
    {
        ?>
        <a href="" class="thumbnail">
            <img src="<?PHP echo $value->src; ?>" alt="img"/>
        </a>split
        <?PHP
    }
?>

public function scroll($load)
{
    $load *= 10; 
    $result = $this->_pdo->query("SELECT * FROM img ORDER BY id DESC LIMIT $load,10");
    return $result->fetchAll(PDO::FETCH_OBJ);   
}

Answer 1

That's to be expected. eg you have the following image IDs coming back from your query.

  42, 39, 37, 5, 4

Let's say your pagination goes by 2 images, so

  42, 39,      37, 5,      4
  ^^^^^^       ^^^^^       ^
  page 1       page 2      page 3

When a new image (id #50, say) gets added, it'll show at at the FRONT of your query results:

 50, 42, 39, 37, 5, 4

so now your pages are off:

 50, 42,     39, 37,      5, 4
 page 1      page 2       page 3

There's not much you can do to fix this, since you're going through your pages in "most recent first" ordering. Adding a new image will naturally make that new image the most recent, and push all the other images down one space.

You could keep track of what the "first" record was in the results when you started paging, and exclude anything higher than that.

eg

 loading page 1 -> highest image = 42
 loading page 2 -> add "where id <=42" to the query