Разбиение на страницы Javascript (следующий проект/предыдущий проект) с помощью jQuery?

Из вашего вопроса вы знаете, сколько страниц будет. Из этого я имею в виду, что содержимое самих страниц жестко запрограммировано, а не загружается динамически из базы данных.

Если это подход, который вы собираетесь использовать, вы можете пройти тот же курс в своем javascript: установите массив с именами файлов, которые вы будете запрашивать, а затем прикрепите обработчики событий к вашим кнопкам «предыдущий/следующий», чтобы циклически перемещаться по массиву . Вам также нужно будет отслеживать «текущую» страницу и проверять, что увеличение/уменьшение текущей страницы не выведет вас за пределы вашего массива страниц.

Мое решение ниже выполняет загрузку следующей страницы через AJAX и не меняет фактическое местоположение браузера. Мне это кажется лучшим подходом, но у вас может быть другая ситуация. Если это так, вы можете просто заменить связанные вызовы AJAX операторами window.location = pages[curPage].

jQuery: (не проверено)

$(function() {
    var pages = [
        '1.php',
        '2.php',
        '3.php'
    ];
    var curPage = 0;

    $('.next').bind('click', function() {
        curPage++;
        if(curPage > pages.length)
            curPage = 0;
        $.ajax({
            url: pages[curPage],
            success: function(html) {
                $('#pageContentContainer').html(html);
            }
        });
    });

    $('.prev').bind('click', function() {
        curPage--;
        if(curPage < 0)
            curPage = (pages.length -1);
        $.ajax({
            url: pages[curPage],
            success: function(html) {
                $('#pageContentContainer').html(html);
            }
        });
    });

});

HTML:

<div id = "pageContentContainer">
    This is the default content to display upon page load.
</div>
<a class = "prev">Previous</a>
<a class = "next">Next</a>

Чтобы перенести это решение на решение, в котором сами страницы не жестко закодированы, а загружены из внешней базы данных, вы можете просто написать PHP-скрипт, который выводит закодированный JSON-массив страниц, а затем вызвать этот скрипт через AJAX и проанализировать JSON. чтобы заменить массив страниц выше.

var pages = [];
$.ajax({
    url: '/ajax/pages.php',
    success: function(json) {
        pages = JSON.parse(json);
    }
});

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

Создайте функцию, управляющую потоком страниц, с вызовом ajax

function changePage(page){
  $.ajax({ 
    type: 'POST',
    url: 'myPaginationFile.php',
    data: 'page='+page,
    success: function(data){
      //work with the returned data.
    }
  });  
}

Эта функция ДОЛЖНА быть создана как глобальная функция.

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

changePage('1');

Затем нам нужно создать файл разбивки на страницы для обработки наших запросов и вывода того, что нам нужно.

<?php
  //include whatever you need here. We'll use MySQL for this example



  $page = $_REQUEST['page'];
  if($page){ 
    $q = $("SELECT * FROM my_table");

    $cur_page = $page; // what page are we on

    $per_page = 15; //how many results do we want to show per page?

    $results = mysql_query($q) or die("MySQL Error:" .mysql_error()); //query 

    $num_rows = mysql_num_rows($result); // how many rows are returned

    $prev_page = $page-1 // previous page is this page, minus 1 page.
    $next_page = $page+1 //next page is this page, plus 1 page.

    $page_start = (($per_page * $page)-$per_page); //where does our page index start
    if($num_rows<=$per_page){
      $num_pages = 1;
      //we checked to see if the rows we received were less than 15. 
      //if true, then we only have 1 page.
    }else if(($num_rows % $per_page)==0){
      $num_pages = ($num_rows/$per_page);
    }else{
      $num_pages = ($num_rows/$per_page)+1;
      $num_pages = (int)$num_pages;
    } 

    $q. = "order by myColumn ASC LIMIT $page_start, $per_page";
    //add our pagination, order by our column, sort it by ascending 

    $result = mysql_query($q) or die ("MySQL Error: ".mysql_error());
    while($row = mysql_fetch_array($result){
      echo $row[0].','.$row[1].','.$row[2];
      if($prev_page){
        echo '<a href="#" id="prev-'.$prev_page.'"> Previous </a>';
        for(i=1;$i<=$num_pages;$i++){
          if($1 != $page){
            echo "<a href=\"JavaScript:changePage('".$i."');\";> ".$i."</a>";
          }else{
            echo '<a class="current_page"><b>'.$i.'</a>';
          }
        }
        if($page != $num_pages){
          echo "<a class='next_link' href='#' id='next-".$next_page."'> Next </a>';
        }
      }
    }          
  }

Я предпочитаю явно определять следующую и предыдущую функции; Итак, приступим к jQuery!

$(".prev_link").live('click', function(e){
  e.preventDefault();//not modifying URL's here.
  var page = $(this).attr("id");
  var page = page.replace(/prev-/g, '');
  changePage(page);              
});

$(".next_link").live('click', function(e){
 e.preventDefault(); // not modifying URL's here
 var page = $(this).attr("id");
 var page = page.replace(/next-/g, '');
 changePage(page);
});

Затем, наконец, мы возвращаемся к нашей функции changePage, которую мы создали изначально, и устанавливаем цель для наших данных, предпочтительно DIV, уже существующий в DOM.

...
success: function(data){
  $("#paginationDiv").html(data);
}

Я надеюсь, что это дало вам хотя бы некоторое представление о том, как я выполняю разбиение на страницы с помощью ajax и php, не изменяя строку URL.

Удачи!