Динамически загружаемый контент

Question

Я пытаюсь загрузить контент, когда пользователь прокручивает мою базу данных. Я пытаюсь загрузить 10 предметов одновременно. в настоящее время я достиг всего, что хочу, за исключением того, что каждый раз загружаю первые 10 предметов. Я действительно не знаю, как отслеживать, какие предметы были загружены последними. Если бы я сделал переменную, она будет перезагружаться в любом случае каждый раз, когда вызывается скрипт.

Что нужно изменить, чтобы загрузить следующие 10 предметов вместо первых 10?

PHP:

<?php 
    // database connection info 
    $conn = mysql_connect('localhost','root','') or trigger_error("SQL", E_USER_ERROR); 
    $db = mysql_select_db('test',$conn) or trigger_error("SQL", E_USER_ERROR); 

    //offset 
    $offset=0; 
    // number of rows to show per page 
    $rowsperpage = 10; 

    // get the info from the db 
    $sql = "SELECT ID, confession, image FROM test LIMIT $offset, $rowsperpage"; 
    $result = mysql_query($sql, $conn) or trigger_error("SQL", E_USER_ERROR); 

    // while there are rows to be fetched... 
    while ($list = mysql_fetch_assoc($result)) { 
     echo '<table border="0" width="600px">'; 
     echo "<tr>"; 
     echo "<td><p>" . '<img src="' . $list['image'] . '" hspace="10" border="1" style="float:left;">' . "</p>"; 
     echo "<p>" . "#" . $list['ID'] . ": " . $list['confession'] . "</p></td>"; 
     echo "</tr>"; 
     echo "</table>"; 
     echo "<br>"; 
     //next ten rows 
     $offset+=10; 
    } 
?> 

JavaScript:

//load content as page scrolls 
    function yHandler() { 

     var content = document.getElementById('content'); 
     var contentHeight = content.offsetHeight; 
     var yOffset = window.pageYOffset; 
     var y = yOffset + window.innerHeight; 

     if (y >= contentHeight) { 
      // Ajax call to get more dynamic data goes here 
      content.innerHTML += '<div class="newData"></div>'; 
      document.onload = $.post('test5.php', function (data) { 
       $('.newData').html(data); 
      }); 
     } 
    } 
    window.onscroll = yHandler; 

Answer 1

Вы должны установить некоторые наперекор это, например:

<input type="hidden" value ='counter_value'> 

И когда вы отправляете запрос, вы должны отправить его со значением счетчика, а в файле php в зависимости от значения счетчика выберите следующие 10 элементов из db. После использования скрипта java значение счетчика увеличивается на ++. И когда вы снова отправите запрос, значение будет равно +1, а в php make логике выберите следующие пункты.

Например, когда вы достигли нижней части страницы, вы хотите загрузить следующие предметы.

$(window).scroll(function() { 

    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
     ///here you have to send ajax to php file to get items 
var counter= $('#idOfInputwithCouner').attr('value'); 
    $.ajax({ 

    url: 'youPhpFile.php', 
    data: "counter=" + counter, 
     type: 'POST', 
     processData: false, 
     contentType: false, 
     success: function (data) { 
      alert('data'); //here you will get data from php file 
     $('#idOfInputwithCouner').attr('value',counter +1); //increase input value 
     } 
    }) 
    } 
}); 

Answer 2

вы можете использовать постраничной здесь логику, отправить PageNumber с каждым вызовом и извлекать данные соответственно,