Я работаю над социальным сайтом, похожим на facebook, где, когда вы перетаскиваете нижнюю часть страницы, загружается новый контент. Вместо этого на моей странице будет больше кнопки вместо прокрутки. Когда пользователь нажимает кнопку «больше», новый контент будет загружаться внизу.
Моя страница состоит из трех разных столбцов. Итак, что бы я хотел сделать, это добавить 3 новых разных контента в эти 3 столбца при нажатии кнопки «больше».
Я хотел бы вернуть новое содержимое div внутри главного столбца div, используя ajax и php. Что-то вроде этого ниже.
<div class='content_3'> <div class='widget'> Content Here </div> </div> Ниже приведен пример моей страницы … Сценарий здесь http://jsfiddle.net/Lqetw5ck/2/
<div id='main_column_1'> <div id='content_1'> Load data from php/mysql database (For 1st Main Div) </div> <div id='content_2'> Load more from php/mysql database when 'more' button is click </div> </div> <br> <div id='main_column_2'> <div id='content_1'> Load data from php/mysql database (For 2nd Main Dev) </div> <div id='content_2'> Load more from php/mysql database when 'more' button is click </div> </div> <br> <div id='main_column_3'> <div id='content_1'> Load data from php/mysql database (For 3rd Main Dev) </div> <div id='content_2'> Load more from php/mysql database when 'more' button is click </div> </div> <button>Show More</button>
И как мне написать свой PHP-код? Потому что я собираюсь вернуть целое содержимое div. Идея, которая у меня была, это что-то вроде этого ниже.
<? $sql_stmt = "SELECT * FROM customers"; $sql = mysqli_query($con, $sql_stmt) or die(mysqli_error($con)); $row = mysqli_fetch_assoc($sql); $content = '<div class="content_3"><div class="widget"> '.$row['firstname'].' </div></div>'; ?>
Я хочу вернуть строку $ content обратно в основной столбец 1,2 и 3, чтобы он отображал новый div под этим столбцом.
Благодаря!
EDIT: Я нашел это как реализовать jScroll? но не знаю, как автор написал свой PHP-код. Может, это почти то же самое, что и мой случай?
Я рад показать вам необработанную реализацию по вашему вопросу:
1. Создайте серверную данные data.php для обслуживания данных:
<?php // data.php $page_index = intval($_GET['page_index']); $page_size = intval($_GET['page_size']); $skip = ($page_index-1) * $page_size; $data = my_query(" select * from my_table limit $skip, $page_size; "); // the my_query function executes the sql query and return the dataset. echo json_encode($data); ?>
После этого вы можете получить выгружаемые данные с запросом с помощью url:
/data.php?page_index=1&page_size=10 для данных первой страницы и
/data.php?page_index=2&page_size=10 для данных второй страницы;
и так далее.
2. Сделайте функцию fetch с помощью jQuery
var current_page = 1; var fetch_lock = false; var fetch_page = function() { if(fetch_lock) return; fetch_lock = true; $.getJSON('/data.php', {page_index: current_page; page_size: 10}, function(data) { // render your data here. current_page += 1; if(data.length == 0) { // hide the `more` tag, show that there are no more data. // do not disable the lock in this case. } else { fetch_lock = false; } }); }
3. Привяжите событие для запуска fetch_page .
Мы хотим, fetch_page триггер fetch_page соответствовал fetch_page :
more . Вы можете решить, будет ли второй или третий эффект лучше, и я покажу вам реализацию:
$(function() { // the definition above. // ... // 1. on page loaded. fetch_page(); // 2. on scroll to bottom $(window).scroll(function() { if($('body').scrollTop() + $(window).height() == $('body').height()) { fetch_page(); } }); // 3. on the `more` tag clicked. $('.more').click(fetch_page); });
Таким образом, вы можете попытаться кодировать эффект таким образом, это не сложно, попробуйте, удачи!
Это две вещи, которые вы должны понять в первый раз, когда загруженная страница загружена так:
SELECT * FROM customers LIMIT 10 OFFSET 0
Во второй раз, когда на дисплее появляется больше кнопки, она посылает значение Limit и OFFSET
SELECT * FROM customers LIMIT 10 OFFSET 10
Код должен быть backend как:
$Limit = $_GET['limit']; $Offset = $_GET['offset']; $sql_stmt = "SELECT * FROM customers LIMIT $Limit OFFSET $Offset"; $sql = mysqli_query($con, $sql_stmt) or die(mysqli_error($con));
Примечание: предполагается, что вы используете запрос GET.
http://jsfiddle.net/Lqetw5ck/4/
HTML
<div id='main_column_1'> <div id='content_1'> Load data from php/mysql database (For 1st Main Div) </div> </div> <button id="show">Show More</button>
JS
$('#show').on('click', function() { //send a ajax request here and set html equal to data recevide by ajax html = '<div>' +'Load data from php/mysql database (For 1st Main Div)' +'</div>'; $('#main_column_1').append(html); });
Это может помочь вам создать представление ui для загрузки большего количества данных. Вы можете сделать php-вещь, используя ответ Manwal