Постраничный вывод данных на аякс очень выгоден, т.к. не нужно каждый раз грузить всю страницу при перелистывании, а будет загружаться только нужная нам информация.
Для работы будем использовать jquery, чтоб было проще работать с аякс и дом элементами.
Сперва напишем функцию на php, которая будет выводить данные в зависимости от номера страницы.
Допустим надо выводить из таблицы content_data в бд mysql.
<?
Теперь нужна функция, которая будет формировать ссылки для смены страницы.
define('NUM_IN_PAGE', '10');//количество записей на странице
function get_data($page){
$query = mysql_query("SELECT * FROM content_data LIMIT".($page*NUM_IN_PAGE).", ".NUM_IN_PAGE);
while($query_res = mysql_fetch_assoc($query)){
echo $query_res['id'].'::'.$query_res['content'].'<br>';//выводим необходимые данные
}
}
?>
<?
function get_pages(){
$query = mysql_query("SELECT count(*) AS count FROM content_data");//узнаем количество записей
$count = mysql_fetch_array($query);
$count = $count[0]['count'];
$pages = ceil($count/NUM_IN_PAGE);//определим количество страниц
if($pages>1){
for($i=1;$i<=$pages;$i++){
echo '<a href="javascript:ajax_get_data('.$page-1.');">'.$i.' </a>';//ajax_get_data будет выводить данные
}
}
}
?>
Теперь нужно написать js функцию ajax_get_data.
function ajax_get_data(page){
var f_url = './?get_data.php?page='+page;//адрес, по которому вызывается функция
$.ajax({
type: "POST",
url: f_url,
success: function(data){
$("#data").html(data);//в DOM с id="data" будем выводить данные
ajax_get_pages(page);//выводим страницы
}
});
}
Функция для вывода ссылок для смены страниц.
function ajax_get_pages(){
Постраничный вывод будет работать используя ajax функцию ajax_get_data(page), поэтому, для того чтобы при входе на главную страницу данные первой страницы сразу подгрузились, нужно в body прописать onload=»ajax_get_data(0)»;
var f_url = './?get_pages.php';//адрес, по которому вызывается функция
$.ajax({
type: "POST",
url: f_url,
data: dataToServer,
success: function(data){
$("#pages").html(data);//в DOM с id="pages" будем выводить ссылки
}
});
}
Дальше нужны дом-элементы, куда будут выводиться данные.
<div id="data">
<!--данные-->
</div>
<div id="pages">
<!--страницы-->
</div>
Здесь я показал самый простой пример постраничного вывода. Можно немного поэксперементировать с функцией вывода ссылок страниц, сделать ее более удобной и универсальной. Так как такая пагинация может использоваться везде я вводил в функцию вывода еще одну или две переменные которые передавали либо тип страницы либо вызываемый js метод, что позволило использовать одну функцию на всем сайте.
Как видите ничего сложного в постраничном выводе нет, мне даже показалось такая пагинация проще чем сделанная с перезагрузкой страницы
Спасибо большое. Очень полезная и поучительная статья. Но я не пойму что писать вместо «dataToServer»? Именно в этом примере? Просто нигде за него не сказано.