Пагиниране на 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="/bg#" 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='/bg#' 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 лентата.

Късмет!