Постраничный вывод данных на аякс очень выгоден, т.к. не нужно каждый раз грузить всю страницу при перелистывании, а будет загружаться только нужная нам информация.
Для работы будем использовать 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(){
  var f_url = './?get_pages.php';//адрес, по которому вызывается функция
  $.ajax({
    type: "POST",
    url: f_url,
    data: dataToServer,
    success: function(data){
        $("#pages").html(data);//в DOM с id="pages" будем выводить ссылки
    }
  });
}
Постраничный вывод будет работать используя ajax функцию ajax_get_data(page), поэтому, для того чтобы при входе на главную страницу данные первой страницы сразу подгрузились, нужно в body прописать onload=»ajax_get_data(0)»;

Дальше нужны дом-элементы, куда будут выводиться данные.

<div id="data">
  <!--данные-->
</div>
<div id="pages">
  <!--страницы-->
</div>

Здесь я показал самый простой пример постраничного вывода. Можно немного поэксперементировать с функцией вывода ссылок страниц, сделать ее более удобной и универсальной. Так как такая пагинация может использоваться везде я вводил в функцию вывода еще одну или две переменные которые передавали либо тип страницы либо вызываемый js метод, что позволило использовать одну функцию на всем сайте.
Как видите ничего сложного в постраничном выводе нет, мне даже показалось такая пагинация проще чем сделанная с перезагрузкой страницы

Можно прочесть также:

1 комментарий » “Постраничный вывод из mysql на ajax”

  1. Анастасия:

    Спасибо большое. Очень полезная и поучительная статья. Но я не пойму что писать вместо «dataToServer»? Именно в этом примере? Просто нигде за него не сказано.